Javascript 来自HTML5颜色选择器的背景色

如何使用HTML5 colorpicker自动更改背景色？ 目前，在我选择了我的颜色后，我必须单击按钮来更改背景色。我试图使用while（1）循环自动更改它，但它只是使我的浏览器崩溃

HTML：
按钮


采色器


结果
JAVASCRIPT:
函数fcolor（）{
var color=document.getElementById（“colorpickerbutton”）.value；
document.getElementById（“覆盖”）.style.backgroundColor=颜色；
}
while（1）
循环导致浏览器崩溃的原因是JavaScript是单线程的。这意味着所有JavaScript都是按顺序运行的。您永远不能让两个JavaScript函数同时运行

因此，
while（1）
会阻止所有其他JavaScript的执行，甚至会冻结网页本身，因为它会阻止所有浏览器事件

您要做的是仅在颜色输入更改时调用函数：）

看起来是这样的：

HTML:

JavaScript:

function changeColor(newColor) {
     document.getElementById("overlay").style.backgroundColor = newColor;
}

您不需要任何无限while循环。您需要攻击eventListener以获取您的输入

<input type="color" id="colorPickerButton" name="color">

document.querySelector("input").addEventListener("input", function() {
    document.body.style.background = this.value;
});


document.querySelector（“输入”）.addEventListener（“输入”，函数（）{
document.body.style.background=this.value；
});
+1用于解释，而-1用于内联JavaScript，这应该避免，因为不好的做法/代码分离。
<input type="color" id="colorPickerButton" name="color">

document.querySelector("input").addEventListener("input", function() {
    document.body.style.background = this.value;
});