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

【问题标题】：How do you change the background color of an <input> element with javascript如何使用 javascript 更改 <input> 元素的背景颜色
【发布时间】：2011-04-29 16:08:30
【问题描述】：

我有一个<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

【问题讨论】：

你确定控制实际上到达了那条线吗？尝试在设置颜色之前输入alert。
是的，我确实做到了，发现警报显示但 if 始终为真。我想我刚刚想通了。如果我没有，我会告诉你。
你还没有向我们展示你是如何初始化blanks的。这可能是问题吗？您确定 blankWord 设置为您认为的那样吗？
实际上它仍然认为 if 语句总是正确的。如果您看到所有代码可能会有所帮助：jsbin.com/imolo3/edit

标签： javascript background-color

【解决方案1】：

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

我个人使用 JQuery（它是任何 javascripter 结束的地方，总体而言是出于浏览器兼容性问题），它会：

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

【讨论】：

【解决方案2】：

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

【讨论】：

好的，您的代码还有其他问题。 text 在需要的地方未定义，因为它在另一个函数中被初始化为局部变量。如果您使用的是 Firefox，请查看错误控制台以诊断此类问题。
继续，我心情大好。交易怎么样。我修复了您的代码，总结了我在此答案中所做的工作，然后您投票并接受了答案。 :-)
我很好。 :-) 实际上，您的随机化程序效率不高，有时可能无法终止。 :-( 我会给你一些其他的想法 - 接受它们或忽略它们，如果你认为合适！
嗯...您可以在这里粘贴您放入顶框中的内容作为出错的示例吗？
啊，对不起。它在页面加载后第一次正常工作，但是当您在不重新加载页面的情况下重建测试时并没有重新初始化。试试这个：jsbin.com/imolo3/6/edit

【解决方案3】：

大小写很重要。你需要的是

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

但是

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

CSS 规则

input.invalid {
    background-color: red;
}

Javascript

element.className = 'invalid';

【讨论】：

【解决方案4】：

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

【讨论】：

或style['background-color']