Tips on displaying various colors in selected HTML elements by adding them to an array and showcasing them in a unique way. Issue arises when colors are displayed multiple times upon appending

Question

Tips on displaying various colors in selected HTML elements by adding them to an array and showcasing them in a unique way. Issue arises when colors are displayed multiple times upon appending

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>

Although the desired output is achieved, the appending of elements based on array length needs to be adjusted to prevent duplication.

javascript jquery html css arrays

Answer 1

Answer №1

Simply generate an html content and substitute it with the existing colors HTML

var colorArray = []
function fetchColors(){
selectedColor=document.getElementById("product_color").value;
colorArray.push(selectedColor);
var count=colorArray.length;
$("#colors").show();
var htmlCode = "";
 for (var i=0;i<count;i++)
 {
htmlCode += '<input type="color" value="'+colorArray[i]+'" disabled>';
 }

 $("#colors").html(htmlCode);
/*  OR you can simply append without using a loop */
/* $("#colors").append('<input type="color" value="'+selectedColor+'" disabled>')*/
 
 console.log(colorArray);
}

<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="fetchColors();">
    <div id="colors" style="display: none;"></div>
  </div>

Answer 2

Simply generate an html content and substitute it with the existing colors HTML

var colorArray = []
function fetchColors(){
selectedColor=document.getElementById("product_color").value;
colorArray.push(selectedColor);
var count=colorArray.length;
$("#colors").show();
var htmlCode = "";
 for (var i=0;i<count;i++)
 {
htmlCode += '<input type="color" value="'+colorArray[i]+'" disabled>';
 }

 $("#colors").html(htmlCode);
/*  OR you can simply append without using a loop */
/* $("#colors").append('<input type="color" value="'+selectedColor+'" disabled>')*/
 
 console.log(colorArray);
}

<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="fetchColors();">
    <div id="colors" style="display: none;"></div>
  </div>

Answer 3

Answer №2

Whenever fetchc() is called, it loops through the elements in the clr array, causing previous selections to be duplicated.

If you have declared clr outside of this function, consider the following example:

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}`)
  })

The result will look like this:

selectedColor is #004080
adding color #004080
selectedColor is #400040
adding color #004080
adding color #400040
selectedColor is #400080
adding color #004080
adding color #400040
adding color #400080

As observed, the first color (#004080) was added three times instead of just once.

To avoid this issue, simply append the new color without redundancy (jQuery is not necessary):

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

Answer 4

Whenever fetchc() is called, it loops through the elements in the clr array, causing previous selections to be duplicated.

If you have declared clr outside of this function, consider the following example:

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}`)
  })

The result will look like this:

selectedColor is #004080
adding color #004080
selectedColor is #400040
adding color #004080
adding color #400040
selectedColor is #400080
adding color #004080
adding color #400040
adding color #400080

As observed, the first color (#004080) was added three times instead of just once.

To avoid this issue, simply append the new color without redundancy (jQuery is not necessary):

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

Tips on displaying various colors in selected HTML elements by adding them to an array and showcasing them in a unique way. Issue arises when colors are displayed multiple times upon appending

Answer №1

Answer №2

Similar questions

CSS 3 Shape: "Reverse Circle" or "Hollow Circle"

Issue with template updating when utilizing ui-router and ion-tabs in Ionic framework

JavaScript - Automatic memory management following the execution of functions

I'm curious if there is a method to determine the status of a .net required field validator using JavaScript

Obtaining input value when button is clicked

When using PWA on an iPhone, the camera feature consistently opens in full screen which makes it difficult to view the HTML button. Adjust

Save documents in Firebase storage

A particular individual experiencing difficulties executing a script within an HTML form that relies on google.script.run.function()

Activate animation as soon as the content comes into view

What methods are available for utilizing "open as" with commands in the shell?

Explaining the Usage of Nav-pills in Bootstrap v4

Issue arises when there are several inline <script> tags containing parameters which result in filtered JSON output

Creating a dynamic name in TypeScript for an object to be utilized in an onClick event

What is the process for uploading a text file into JavaScript?

Comparison Between React-Redux mapStateToProps and Inheriting Props from ParentsIn the

Is it possible to dynamically load records in real time with the help of PHP and jQuery?

Switch out the current R shiny htmlwidget data for updated data

I am experiencing issues with my for loop not functioning correctly within my On-Click Event in Javascript

Setting null for HttpParams during the call

VueJS Router error: The variable $route is undefined