1

我有一个页面，用户在其中输入颜色，然后调用 onClick 方法来更改表格中各个单元格的颜色。但是，当我单击任何单元格时，只有最后一个单元格（在本例中为 cell3）会改变颜色。我究竟做错了什么？

我得到错误：

消息：'document.getElementById(...)' 为空或不是对象
行：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>
4

3 回答 3

3

将您的 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>

这是一个非常常见的 Javascript 问题：所有代码共享循环结束时的i值。3您可以通过使用另一个辅助函数来解决它，如下所示：

function changeIt(i) {
  // This inner function now has its own private copy of 'i'
  return function() {
    var newColor = document.getElementById('userInput').value;
      document.getElementById("td" + i).style.backgroundColor = newColor;
  }
}

for(var i = 1; i <= 3; i++){
    document.getElementById(i).onclick = changeIt(i);
}

它也可以使用匿名函数编写，但这些更难阅读。

于 2012-09-20T08:26:11.593 回答
1

首先，你的 for 循环是错误的。尝试：

for(var i = 1; i <= 3; i++) {
   //code
}

其次，不是每次在循环中检索元素，您可以使用this：

this.style.backgroundColor = document.getElementById('userInput').value;
于 2012-09-20T08:17:22.177 回答
1

Jeremy 的回答很接近，但在单击元素之前不会调用 changeIt 的问题，此时 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);
}

作为一个匿名函数...

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 = (function(n) {
    return function() {
      var newColor = document.getElementById('userInput').value;
      document.getElementById("td" + n).style.backgroundColor = newColor;
    }
  })(i);
}

编辑杰里米的答案现在是正确的

于 2012-09-20T08:44:08.350 回答