How to display multiple color values using javascript and input type=color

I have multiple color pickers and want to display the value next to the color picker… W3 has an example of displaying one, and I’ve tried to give each color picker its own function which works, but it’s rather tedious since I have around 7 color pickers. I feel like there could be a better way of doing this, but I have limited javascript knowledge. Any suggestions to make this more efficient would be great! thank you!

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_color_value2

Answer

just create a more generic function like this:

function myFunction(colorPickerId, textElementId) {
   var x = document.getElementById(colorPickerId).value;
   document.getElementById(textElementId).innerHTML = x;
}

and call it like this:

<button onclick="myFunction('colorPicketHtmlId','textElementHtmlId')">Try it</button>

or you could create a js function which calls one time the function for every colorPicker:

function changeAll()
{
    myFunction("colorPicketHtmlId","textElementHtmlId");
    myFunction("colorPicketHtmlId1","textElementHtmlId1");
    myFunction("colorPicketHtmlId2","textElementHtmlId2");
    //...
}