CODEWITHSUNDEEP
javascript
Blnukem
Blnukem

Reputation: 183

Change multiple background color with color picker

I'm using this colour picker for my site. What I need to do is to be able to change the color each box separately. I've looked at the JS file itself but found it a bit complex for me.

<!DOCTYPE html>
<html>
<head>
    <title>Color Change option</title>
</head>
<body>


<script src="jscolor.js"></script>

<p>Rectangle color:
<input class="jscolor {onFineChange:'update(this)'}" value="cc66ff">

<p id="rect1" style="border:1px solid gray; width:161px; height:100px;">

<hr />

<p>Rectangle color:
<input class="jscolor {onFineChange:'update(this)'}" value="cc66ff">

<p id="rect2" style="border:1px solid gray; width:161px; height:100px;">


<script>                  
function update(jscolor) {

    // 'jscolor' instance can be used as a string
    document.getElementById('rect').style.backgroundColor = '#' + jscolor
}
</script>

</body>
</html>

Upvotes: 0

Views: 352

Answers (2)

Mouser
Mouser

Reputation: 13304

By passing the id to the update function this should work:

<p>Rectangle color:
<input class="jscolor {onFineChange:'update(this, \'rect1\')'}" value="cc66ff">

<p id="rect1" style="border:1px solid gray; width:161px; height:100px;">

<hr />

<p>Rectangle color:
<input class="jscolor {onFineChange:'update(this, \`rect2\')'}" value="cc66ff">

<p id="rect2" style="border:1px solid gray; width:161px; height:100px;">


<script>                  
    function update(jscolor, id) {

     // 'jscolor' instance can be used as a string
     document.getElementById(id).style.backgroundColor = '#' + jscolor
    }
</script>

Upvotes: 0

h01001000
h01001000

Reputation: 281

<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js"></script>
<p>'onchange' fires after the mouse button is released

<p>Rectangle1 color:
<input class="jscolor" onchange="update(this.jscolor, 'rect1')" value="cc66ff">

<p id="rect1" style="border:1px solid gray; width:161px; height:100px;">

<p>Rectangle2 color:
<input class="jscolor" onchange="update(this.jscolor, 'rect2')" value="cc66ff">

<p id="rect2" style="border:1px solid gray; width:161px; height:100px;">

<script>
function update(jscolor, target) {
    // 'jscolor' instance can be used as a string
    document.getElementById(target).style.backgroundColor = '#' + jscolor
}
</script>

This works, directly from their documentation. You just need to modify the function to also accept the ID of the element you want to change.

Upvotes: 1

Related Questions