动态的onClick不工作

我知道即时做的事情真的很愚蠢here.Im得到错误的document.getElementById（）为空或不是一个对象。有人可以帮助我吗？动态的onClick不工作

<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>

谢谢

来源

2011-02-25 manraj82

我建议使用一个框架，如jQuery，所以事件绑定跨平台工作。 – Jamie 2011-02-25 16:19:19

同意你+1 – Jith 2011-02-25 16:34:52

索引问题

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

来源

2011-02-25 16:09:46

我认为应该是'<='。 – zdyn 2011-02-25 16:10:34

+1我也不打算把在一个答案......正要发表评论... – Endophage 2011-02-25 16:10:55

@ZDYN感谢，更新 – 2011-02-25 16:11:02

我相信已经有解决方案;无论如何，我只是想说，你有jQuery的替代太...

 

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

来源

2011-02-25 16:33:14 Jith

动态的onClick不工作

回答

相关问题