How to update the background color of a textbox using 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);

I mean, why a timer, when you can just use an event handler to detect changes. With a timer you get lag, and you also have the timer running constantly event when it does't need to do anything — musefan
– musefan, Commented Aug 26, 2015 at 12:41

Shailendra Sharma · Accepted Answer · 2015-08-25 13:53:20Z

1

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);

edited Aug 25, 2015 at 13:53

answered Aug 25, 2015 at 13:36

Shailendra Sharma

6,9922 gold badges30 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

musefan Over a year ago

You could at least tidy up your answer if you are to be the accepted one

musefan · Accepted Answer · 2015-08-25 13:31:24Z

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

answered Aug 25, 2015 at 13:31

musefan

48.5k21 gold badges144 silver badges193 bronze badges

Collectives™ on Stack Overflow

How to update the background color of a textbox using JavaScript?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related