请问这段代码哪里错了，为什么没有效果？

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

浏览 1643回答 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