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