for循环下，加入点击事件显示for的i值却总是获取最后的值

原创于 2019-02-28 17:03:10 发布 · 1.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

js 专栏收录该内容

0 篇文章

订阅专栏

本文探讨了JavaScript中常见的按钮点击事件问题，即多个按钮点击后只显示最后一个按钮的序号。通过分析作用域和闭包原理，提供了一种改进的解决方案，确保每个按钮点击都能正确显示其对应的序号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：

新增几个按钮，点击的时候显示对应的序号。

普通做法：

for(var i=0;i<5;i++){
        var input = document.createElement("input");
        input.value = "显示";
        input.type = "button";
        input.onclick=function(){
            alert("此时的值："+i);
        }
        document.getElementById("a").appendChild(input);
    }

结果：无论点击哪个按钮，都是显示“此时的值：5”，

原因分析：

由于点击操作是在for循环完成后才进行的，而从i的作用域考虑，for循环完后的i已经是5了，所以无论点击哪个按钮，显示的只会是i的最后一个值5。如果要实现点击对应的按钮显示对应的值，则需要使用自执行函数，这里涉及到闭包的知识，具体可以搜有关资料查看。

改进后的代码：

for (var i = 0; i < 5; i++) {
        (function(i) {
            var input = document.createElement("input");
            input.value = "显示";
            input.type = "button";
            input.onclick = function() {
                alert(i);
            }
            document.getElementById("a").appendChild(input);
        })(i);

    }

结果能正常显示。