请问这段代码哪里错了，为什么没有效果？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="第一个" />
<input type="button" value="第二个" />
<input type="button" value="第三个" />
<script>
var btn = document.getElementsByTagName('input');
for(var i = 0; i < btn.length; i ++) {
btn[i].onclick = function(){
if(i==0){
alert("这是第一个");
}
if(i==1){
alert("这是第二个");
}
if(i==2){
alert("这是第三个");
}
}
}
</script>
</body>
</html>
懒人00浏览 1519回答 3
3回答
-
stone310
i=0的时候判断i<btn.length为true,然后i++，i=1；i=1的时候判断i<btn.length为true,然后i++，i=2；i=2的时候判断i<btn.length为true,然后i++，i=3；i=3的时候判断i<btn.length为false,所以最后i为3i放在事件内部是不会循环的，因为页面加载时for循环绑定了 btn[i].onclick事件，而这是个异步加载，页面加载好后i已经循环完毕，是个定值，就是btn.length，在这里即为3 -
如风糖
你搜索一下js闭包 就能解决你的问题 -
黑女2008
循环绑定，就相当于是每个按钮有一个点击事件，比如你点击第一个的时候，调用第一个的事件，但是此时你的i是当时循环的时候的最后i的值，是3，并不是你这次点击的第i个。可以直接这样写：var btn = document.getElementsByTagName('input'); for(var i = 0; i < btn.length; i ++) { btn[i].onclick = function(){ alert(this.defaultValue); } }
随时随地看视频慕课网APP
Html/CSS
Html5
JavaScript