Javascript增量变量，用于在单击时更新表单元格
我有一个页面，用户在其中输入颜色，我调用onClick方法来更改表中各个单元格的颜色。但是，当我单击任何单元格时，只有最后一个单元格（本例中为cell3）会更改颜色。我做错了什么 我得到一个错误： 消息：“document.getElementById（…）”为空或不是对象Javascript增量变量，用于在单击时更新表单元格,javascript,html,html-table,onclick,Javascript,Html,Html Table,Onclick,我有一个页面，用户在其中输入颜色，我调用onClick方法来更改表中各个单元格的颜色。但是，当我单击任何单元格时，只有最后一个单元格（本例中为cell3）会更改颜色。我做错了什么 我得到一个错误： 消息：“document.getElementById（…）”为空或不是对象 行：24 字符：4 代码：0 我的代码是： <html> <body> <input type='text' id='userInput' value='yellow'
行：24
字符：4
代码：0 我的代码是：
<html>
<body>
<input type='text' id='userInput' value='yellow' />
<table border="1">
<tr>
<td id="1">cell1
</td>
</tr>
<tr>
<td id="2">cell2
</td>
</tr>
<tr>
<td id="3">cell3
</td>
</tr>
</table>
<script type="text/javascript">
for(var i = 1; i <= 3; i++){
document.getElementById(i).onclick = function(){
var newColor = document.getElementById('userInput').value;
document.getElementById(i).style.backgroundColor = newColor;
}
}
</script>
</body>
</html>
第1单元
细胞2
第三单元
for（var i=1；i首先，您的for循环是错误的。请尝试：
for(var i = 1; i <= 3; i++) {
//code
}
首先，您的for循环是错误的。请尝试：
for(var i = 1; i <= 3; i++) {
//code
}
将HTML更改为：ID必须以字母字符开头。以数字开头无效
<table border="1">
<tr>
<td id="td1">cell1
</td>
</tr>
<tr>
<td id="td2">cell2
</td>
</tr>
<tr>
<td id="td3">cell3
</td>
</tr>
</table>
它也可以使用匿名函数编写，但这些函数更难阅读。将HTML更改为：ID必须以字母字符开头。以数字开头无效
<table border="1">
<tr>
<td id="td1">cell1
</td>
</tr>
<tr>
<td id="td2">cell2
</td>
</tr>
<tr>
<td id="td3">cell3
</td>
</tr>
</table>
它也可以使用匿名函数编写，但这些函数更难阅读。Jeremy的答案很接近，但更改中仍然存在一个问题，直到单击元素时才调用它，此时i的值仍然是3。使用Jeremy对HTML的更新，正确的脚本可以编写为
function createChangeColorHandler(n) {
return function() {
var newColor = document.getElementById('userInput').value;
document.getElementById("td" + n).style.backgroundColor = newColor;
}
}
for(var i = 1; i <= 3; i++) {
// We pass i to the function createChangeColorHandler by value
// at the time of this pass of the loop rather than referencing
// the variable directly after the loop has finished
document.getElementById(i).onclick = createChangeColorHandler(i);
}
函数createChangeColorHandler（n）{
返回函数（）{
var newColor=document.getElementById（'userInput'）。值；
document.getElementById（“td”+n）.style.backgroundColor=newColor；
}
}
对于（var i=1；iJeremy的答案很接近，但更改中仍然存在一个问题，直到单击元素时才调用它，此时i的值仍然是3。使用Jeremy对HTML的更新，正确的脚本可以写成
function createChangeColorHandler(n) {
return function() {
var newColor = document.getElementById('userInput').value;
document.getElementById("td" + n).style.backgroundColor = newColor;
}
}
for(var i = 1; i <= 3; i++) {
// We pass i to the function createChangeColorHandler by value
// at the time of this pass of the loop rather than referencing
// the variable directly after the loop has finished
document.getElementById(i).onclick = createChangeColorHandler(i);
}
函数createChangeColorHandler（n）{
返回函数（）{
var newColor=document.getElementById（'userInput'）。值；
document.getElementById（“td”+n）.style.backgroundColor=newColor；
}
}
对于（var i=1；我更新为使用this
关键字，这应该可以让你的代码正常工作。此外，正如Jeremy指出的，你不应该用数字来启动元素id。更新为使用this
关键字，这应该可以让你的代码正常工作。此外，正如Jeremy指出的，你不应该用数字来启动元素id。我正要启动投票，但您的代码不能解决问题，您必须将document.getElementById（i）.onclick=function（）{changeIt（i）；}
替换为document.getElementById（i）.onclick=changeIt（i）
变量范围和字母字符id的优点很好。不过，我更喜欢使用这个。@StuartWakefield--是的，我确实有点搞砸了。谢谢你的提醒。@EricLennartsson--这个会是一个更好的选择，但这样我们就失去了避免未来问题的机会。我本来打算投票，但是您的代码无法解决问题，必须将document.getElementById（i）.onclick=function（）{changeIt（i）；}
替换为document.getElementById（i）.onclick=changeIt（i）
变量范围和字母字符id的优点很好。不过，我更喜欢只使用这个。@StuartWakefield--是的，我确实有点搞砸了。谢谢你的提醒。@EricLennartsson--这个会是一个更好的选择，但那样我们就失去了避免未来问题的机会。