JavaScript实现循环点击按钮弹出对应的数字

最新推荐文章于 2023-05-17 17:16:30 发布

sleepwalker_1992

最新推荐文章于 2023-05-17 17:16:30 发布

阅读量3.9k

点赞数 4

分类专栏： JavaScript 文章标签：闭包

本文链接：https://blog.csdn.net/sleepwalker_1992/article/details/80890441

版权

JavaScript 专栏收录该内容

57 篇文章 2 订阅

订阅专栏

问题：循环点击按钮弹出对应的数字

<body>
<input type="button" value="按钮1"/>
<input type="button" value="按钮2"/>
<input type="button" value="按钮3"/>
<input type="button" value="按钮4"/>
<input type="button" value="按钮5"/>
<input type="button" value="按钮6"/>
<input type="button" value="按钮7"/>
<input type="button" value="按钮8"/>
<input type="button" value="按钮9"/>
<input type="button" value="按钮10"/>
</body>

错误写法：

<script>
    var inputLists=document.querySelectorAll("input");
    for(var i=0; i<inputLists.length; i++){
        inputLists[i].οnclick=function () {
            alert(i+1);
        };
    }
</script>

运行结果：点击任何一个按钮，弹出的数字都是11

解决方法：

方法一：闭包，将i作为函数参数值传递给内部函数。

    var inputLists=document.querySelectorAll("input");
    for(var i=0; i<inputLists.length; i++){
        (function(j){
            inputLists[j].οnclick=function () {
                alert(j+1);
            };
        }(i));
    }

方法二：闭包，将i作为函数参数值传递给内部函数。

    var inputLists=document.querySelectorAll("input");
    for(var i=0; i<inputLists.length; i++){
        inputLists[i].οnclick=(function (j) {
            return function(){
                alert(j+1);
            };
        }(i));
    }

方法三：ES6里，用let定义变量，会产生块级作用域。

    var inputLists=document.querySelectorAll("input");
    for(let i=0; i<inputLists.length; i++){
        inputLists[i].οnclick=function () {
            alert(i+1);
        };
    }

sleepwalker_1992

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
JavaScript实现循环点击按钮弹出对应的数字

问题：循环点击按钮弹出对应的数字&lt;body&gt;&lt;input type="button" value="按钮1"&gt;&lt;input type="button" value="按钮2"&gt;&lt;input type="button" value="按钮3"&gt;&lt;input t
复制链接

扫一扫

专栏目录