Search code examples
htmljscolor

Change multiple DIVs background using jscolor

Is there a way to change multiple DIVs backgrounds at the same time using jscolor? Up until now my tests showed me that it only takes one id at a time and ignores the rest. I know there shouldn't be multiple DIVs with same id, for now i'm trying to get it to work temporarily.

<p>Link INPUT elements:
<button class="jscolor
{valueElement:'valueInput', styleElement:'styleInput'}">
Click here to pick a color
</button>
<p>
Value: <input id="valueInput" value="ff6699"><br>
Style: <input id="styleInput">
Solution

  • If you only want to have 2 Div with the same background you could use the onfinechange function that goes with jscolor: here

    More than two Div won't work as you cannot give the same ID to multiple Div. You can see more details on why that is here

    Otherwise, you might be able to go around it with PHP or javascript by taking the valueInput and giving that value to the style. Or setting up several onfinechange functions.

    Something like background-color: $valueInput