如何使用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");