如何使用javascript更改<input />元素的背景颜色

Question

我有一个<input>元素，我想更改背景颜色。我目前使用的代码就是这个（但它不起作用）：

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

第三到最后一行是最重要的

更新

我修复了camelCase，但它仍然不起作用。有错误的想法吗？

完整代码在此处：http://jsbin.com/imolo3/edit

Answer 1

案例很重要。你需要的是

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

<强>然而

最好使用css规则并仅使用javascript将类添加到元素中。

CSS规则

input.invalid {
    background-color: red;
}

的Javascript

element.className = 'invalid';

Answer 2

它应该是backgroundColor - 注意大写C，JavaScript区分大小写。

Answer 3

您确定此脚本是在正确的时间运行吗？如果它在页面完全形成之前运行，则可能不存在相应的元素。

Answer 4

所以不要重复其他用户提供的解决方案。

我个人使用JQuery（这是任何javascripter结束的地方，总体上是针对浏览器兼容性问题），它会：

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