如何使用JavaScript更新文本框的背景颜色？

Question

I want to make a text box all in javascript no html (so can use it in the console.log), update background color with setInterval. How can it be done?

This is what I got so far, but does not work.

var x = document.createElement("INPUT");
x.setAttribute("type", "text");
x.setAttribute("value", color);
document.body.appendChild(x);
var color;
setInterval(function(){if (x.setAttribute("value",color)===color{document.body.style.backgroundColor=color};},100);

Answer 1

Don't use setInterval to poll the change, instead use the keyup event to detect when the user changes the value:

var color = '#FFFFFF';
var x = document.createElement("INPUT");
x.setAttribute("type", "text");
x.setAttribute("value", color);
document.body.appendChild(x);

x.onkeyup = function(){
    color = this.value;
    document.body.style.backgroundColor = color;
};

Here is a working example

Answer 2

Try this solution works with timeinterval

var x = document.createElement("INPUT");
x.setAttribute("type", "text");
x.setAttribute("value", color);
document.body.appendChild(x);
var color = '#FFFFFF';
setInterval(function () {
    color = x.value; // you need to get value of color code 
    document.body.style.backgroundColor = color // then it work here
    console.log(color);
}, 100);