如何根据颜色选择器值 onclick 更改元素颜色

Question

我希望将对象的背景颜色更改为input type color（颜色选择器）中的值。当您单击该对象时。到目前为止，这就是我想出来的。

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>

Answer 1

在您的 Javascript 代码中，缺少关键字 function，因此无法调用 GetColor。添加此关键字后，它可以正常工作：

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>