多个按钮通过for循环绑定点击事件出现错误的解决办法

最新推荐文章于 2021-11-22 22:16:56 发布

Show_Yeah

最新推荐文章于 2021-11-22 22:16:56 发布

阅读量1.4k

点赞数 7

分类专栏： JS 文章标签：多个按钮绑定事件 for循环内绑定事件多按钮点击事件 JS循环内事件

本文链接：https://blog.csdn.net/qq_32183965/article/details/102833046

版权

JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

有3个按钮，我们给每个按钮添加点击事件，希望每次点击时输出当前点击的是第几个按钮，但是目前不论点击哪个按钮，最终输出的都是4，代码如下：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<script>
    var btn = document.getElementsByTagName("input");
    for (var i=0;i<3;i++){
        btn[i].onclick = function () {
            alert(i)
        }
    }
</script>
</body>
</html>

错误分析

没有实现的原因是我们将单击方法定义在了for循环里面，而定义在for循环不能实现的原因是：

（1）因为onclick事件是先绑定再触发的。

（2）执行循环的时候，给每个都绑定了onclick，这个时候i还不全是3，但是到最后点击的时候，循环已经结束了，所以i的值就是循环结束之后的值。

修改思路

在循环外面封装点击事件，在循环里面调用点击事件，将变量i作为参数传递进来

修改后

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<script>
    var btn = document.getElementsByTagName("input");
    for (var i=0;i<3;i++){
        myClick(i)
    }
    function myClick(i) {
        btn[i].onclick = function () {
            alert(i+1)
        }
    }
</script>
</body>
</html>

Show_Yeah

关注

7
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
多个按钮通过for循环绑定点击事件出现错误的解决办法

有3个按钮，我们给每个按钮添加点击事件，希望每次点击时输出当前点击的是第几个按钮，但是目前不论点击哪个按钮，最终输出的都是4，代码如下：<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="...
复制链接

扫一扫