如何显示选定的 html 多种颜色并推入数组并显示它？颜色在附加时显示多次答案

【问题标题】：how to show the selected html multiple colors and pushing into an array and to display it? color is displaying multiple times when its appended如何显示选定的 html 多种颜色并推入数组并显示它？颜色在附加时显示多次
【发布时间】：2020-05-15 18:28:49
【问题描述】：

javascript

function fetchc(){
pclr=document.getElementById("product_color").value;
clr.push(pclr);
var n=clr.length;
$("#colors").show();
 for (var i=0;i<n;i++)
 {
$("#colors").append('<input type="color" value="'+clr[i]+'" disabled>')
 }
 console.log(clr);
}

html

<div class="form-group form-inline">
    <label for="product_color"> Select product Color</label>&emsp;
    <input type="color" class="form-control" id="product_color"placeholder="Product color" style="width: 100px;" onchange="fetchc();">
    <div id="colors" style="display: none;"></div>
  </div>

我得到了正确的输出，但就数组长度而言，它被多次附加......我只是希望它显示一次

【问题讨论】：

标签： javascript jquery html css arrays

【解决方案1】：

只需创建一个html 内容并替换为存在colors html

var clr = []
function fetchc(){
pclr=document.getElementById("product_color").value;
clr.push(pclr);
var n=clr.length;
$("#colors").show();
var html = "";
 for (var i=0;i<n;i++)
 {
html += '<input type="color" value="'+clr[i]+'" disabled>';
 }

 $("#colors").html(html);
/*  OR don't use for loop just append */
/* $("#colors").append('<input type="color" value="'+pclr+'" disabled>')*/
 
 console.log(clr);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group form-inline">
    <label for="product_color"> Select product Color</label>&emsp;
    <input type="color" class="form-control" id="product_color"placeholder="Product color" style="width: 100px;" onchange="fetchc();">
    <div id="colors" style="display: none;"></div>
  </div>

【讨论】：

【解决方案2】：

每次调用 fetchc() 时，您都会遍历您的 clr 数组，因此您重新添加之前的选择。

假设你在这个函数之外声明了clr，你可以看到这个例子：

const addedColors = [];
function fetchc(){
  const selectedColor = document.getElementById("product_color").value;
  console.log(`selectedColor is ${selectedColor}`);
  addedColors.push(selectedColor);
  addedColors.map((color) => {
    console.log(`adding color ${color}`)
  })

在这种情况下，输出将是

selectedColor 是 #004080
添加颜色 #004080
selectedColor 是 #400040
添加颜色 #004080
添加颜色 #400040
selectedColor 是 #400080
添加颜色 #004080
添加颜色 #400040
添加颜色 #400080

如您所见，您刚刚添加了第一种颜色 (004080) 3 次。

因此，只需添加新颜色（同样您不需要 jQuery）：

function fetchc(){
  const selectedColor = document.getElementById("product_color").value;
  console.log(`selectedColor is ${selectedColor}`);
  const newInput = document.createElement("input");
  newInput.type = 'color';
  newInput.value = selectedColor;
  document.getElementById("colors").appendChild(newInput);
  addedColors.push(selectedColor);
}

【讨论】：