动态onClick无法正常工作

时间:2011-02-25 16:08:57

标签: javascript

我知道我在这里做了一些非常愚蠢的事情。我得到错误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>

谢谢

2 个答案:

答案 0 :(得分:9)

索引问题

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);
}

答案 1 :(得分:2)

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


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