как показать выделенные html несколько цветов и вставить в массив и отобразить его? цвет отображается несколько раз, когда его добавили

Question

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>

я получаю правильный вывод, но с уважением чтобы длина массива добавлялась несколько раз ... я просто хочу, чтобы он показывал один раз

Answer 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>

Answer 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);
}