如何基於顏色選擇器值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>