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

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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