Цвет фона из палитры 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. Вам нужно атаковать eventListener для ввода.

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

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

Answer 2

Причина, по которой цикл 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;
}