Question

我知道我在这里做了一些非常愚蠢的事情。我得到错误document.getElementById（）是null或不是对象。有人可以帮帮我吗？

<body>
<div id="box1" style="width:100px;height:100px;background:#ccc;"></div>
<div id="box2" style="width:100px;height:100px;background:#ccc;"></div>
<div id="box3" style="width:100px;height:100px;background:#ccc;"></div>
<div id="box4" style="width:100px;height:100px;background:#ccc;"></div>
<div id="box5" style="width:100px;height:100px;background:#ccc;"></div>
<script>

for (var i = 0; i < 5; i++) {
document.getElementById('box' + i).onclick = function() {alert('You clicked on box #' + i);};
}

</script>
</body>

谢谢

Answer 1

索引问题

i正在0开始。没有名为box0的框。将循环更改为：

for (var i = 1; i <= 5; i++) {
document.getElementById('box' + i).onclick = function() {alert('You clicked on box #' + i);};
}

范围问题

正如评论员所指出的那样，代码也存在范围问题。将其更改为：

for (var i = 1; i <= 5; i++) {
  document.getElementById('box' + i).onclick = (function(index){
    return function() {
      alert('You clicked on box #' + index);
    };
  })(i);
}

Answer 2

我相信已经有了解决方案;无论如何我只想说你有jQuery替代品..


$(document).ready(function() {
     $("div[id*=box]").click(function() {
         alert('You clicked on box ' + $(this).attr('id'));
     });
 });

动态onClick无法正常工作

2 个答案: