CODEWITHSUNDEEP
javascripthtmlcsscolorscolor-picker
user11814338
user11814338

Reputation:

how to change an element color based on value of the color picker value onclick

I want the background color of an object to be changed to the value in a input type color(color picker). when you click on that object. that's what I came out with so far.

GetColor(id)
        {
            document.getElementById(id).style.backgroundColor = document.getElementById("Color Picker").value;
        }
<div style="background-color:black; outline-color:black; outline-width:2px; width:500px; height:500px;"  id="ExtentionBody" onclick="GetColor('ExtentionBody')"></div>
        <div><input name="Color Picker" type="color" id="Color Picker"/></div>

Upvotes: 0

Views: 1180

Answers (1)

Fifi
Fifi

Reputation: 497

In your Javascript code, the keyword function was missing, so it was impossible to call GetColor. With this keyword added, it works fine :

function GetColor(id)
{
document.getElementById(id).style.backgroundColor = 
    document.getElementById("Color Picker").value;
}
<div style="background-color:black; 
        outline-color:black; 
        outline-width:2px; 
        width:500px; 
        height:100px;"  
     id="ExtentionBody" 
     onclick="GetColor('ExtentionBody')">
</div>
<div><input name="Color Picker" type="color" id="Color Picker"/></div>

Upvotes: 2

Related Questions