javascript - 来自 HTML5 颜色选择器的背景颜色

Question

如何使用 HTML5 颜色选择器自动更改背景颜色？目前在我选择了我的颜色之后，我必须点击按钮来改变背景颜色。我尝试使用 while (1) 循环来自动更改它，但它只会让我的浏览器崩溃。

https://jsfiddle.net/VortexP/eh4t17fv/4/

HTML:
<input type="button" id="fullscreenbutton" onclick="fcolor()"> Button
<br>
<input type="color" id="colorpickerbutton" name="color"> Colorpicker
<br>
<div id="overlay" ></div>Result

JAVASCRIPT:
function fcolor () {
var color = document.getElementById("colorpickerbutton").value;
document.getElementById("overlay").style.backgroundColor = color;
}

Answer 1

while(1) 的原因循环使浏览器崩溃是因为 JavaScript 是单线程的。这意味着您的所有 JavaScript 都按顺序运行。您永远不可能同时运行两个 JavaScript 函数。

所以，while(1)阻止所有其他 JavaScript 执行，甚至卡住网页本身，因为它阻止所有浏览器事件。

你想要做的是仅当颜色输入改变时调用一个函数:)

看起来像这样:

HTML: <input type="color" id="colorpickerbutton" name="color" onChange="changeColor(this.value)">

JavaScript:

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