How do you change the background color of an <input> element with javascript

Question

I have a <input> element that I want to change the background color on. The code I am currently using is this (but it is not working):

var allBlanksLoc = document.getElementById('text');
var allBlanks = allBlanksLoc.getElementsByTagName('input');

for(i=0; i<allBlanks.length; i++) {
var currentBlank = allBlanks[i];
var wordNum = blanks[i];
var blankWord = text[wordNum];
var usrAnswer = currentBlank.value;

if (usrAnswer != blankWord) {
currentBlank.style.backgroundColor = "red";
}
}

The third to last line being the most important

Update:

I fixed the camelCase on it but it still does not work. Any ideas of bugs there?

The full code is here: http://jsbin.com/imolo3/edit

Are you sure that control is actually reaching that line? Try putting an alert right before setting the colour. — casablanca
– casablanca, Commented Oct 23, 2010 at 19:26
Yeah, i did exactly that and found out that the alert shows but the if is always true. I think I just figured it out. i let you know if i didn't. — chromedude
– chromedude, Commented Oct 23, 2010 at 19:28
You've not showed us how you're initialising blanks. Could this be the problem? Are you sure that blankWord is set to what you think it is? — Tim
– Tim, Commented Oct 23, 2010 at 19:37
actually its still thinking the if statement is always right. it might be helpful if you saw all the code: jsbin.com/imolo3/edit — chromedude
– chromedude, Commented Oct 23, 2010 at 19:39

Brad Mace · Accepted Answer · 2010-10-23 19:29:36Z

4

Case is important. What you need is

document.getElementById('test').style.backgroundColor='red';

However

it would be better to use a css rule and use javascript only to add the class to the element.

CSS Rule

input.invalid {
    background-color: red;
}

Javascript

element.className = 'invalid';

answered Oct 23, 2010 at 19:29

Brad Mace

28k19 gold badges110 silver badges152 bronze badges

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

Comments

casablanca · Accepted Answer · 2010-10-23 19:24:11Z

2

It should be backgroundColor - notice the capital C, JavaScript is case-sensitive.

answered Oct 23, 2010 at 19:24

casablanca

70.9k8 gold badges139 silver badges155 bronze badges

1 Comment

Felix Kling Over a year ago

or style['background-color']

Tim · Accepted Answer · 2010-10-23 19:35:37Z

1

Are you sure that this script is running at the right time? If it runs before the page is fully formed, the appropriate elements might not be present.

edited Oct 23, 2010 at 19:35

answered Oct 23, 2010 at 19:28

Tim

9,30937 silver badges54 bronze badges

18 Comments

Tim Over a year ago

OK, you have other problems with your code. text is undefined at the point where it is needed, as it is initialised as a local variable within another function. If you are using Firefox, have a look in the Error Console to diagnose this sort of thing.

Tim Over a year ago

Go on, I'm in a generous mood. How about a deal. I fix your code, summarise what I've done in this answer, and you vote the answer up and accept it. :-)

Tim Over a year ago

Fine by me. :-) Actually, your randomisation routine isn't very efficient, and can sometimes fail to terminate. :-( I'll give you some other ideas - do take them or ignore them as you see fit!

Tim Over a year ago

Hmmm... Can you paste here what you're putting into the top box as an example of something where it goes wrong?

Tim Over a year ago

Ah, sorry. It was working fine for the first time after the page loaded, but wasn't reinitialising itself when you rebuilt the test without reloading the page. Try this: jsbin.com/imolo3/6/edit

|

netadictos · Accepted Answer · 2010-10-23 19:57:39Z

0

So not to repeat the solutions other users gave.

I personally use JQuery (and it's where any javascripter ends, overall for browser compatibility issues), and it would:

$(currentBlank).css("background-color","red");

answered Oct 23, 2010 at 19:57

netadictos

7,7503 gold badges46 silver badges70 bronze badges

Collectives™ on Stack Overflow

How do you change the background color of an <input> element with javascript

4 Answers 4

CSS Rule

Javascript

Comments

1 Comment

18 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

CSS Rule

Javascript

Comments

1 Comment

18 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related