js用for循环依次给十个相同类名标签赋予点击事件,点击输出相应下标

本文链接：https://blog.csdn.net/a666666000/article/details/123985168

题目如下:

使用js获取一组10个具有相同class属性的button标签的DOM集合，对每个button添加一个点击事件，输出每个button在这个数组集合中的下标

html代码如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button class="btn">输出下标为0</button>
    <button class="btn">输出下标为1</button>
    <button class="btn">输出下标为2</button>
    <button class="btn">输出下标为3</button>
    <button class="btn">输出下标为4</button>
    <button class="btn">输出下标为5</button>
    <button class="btn">输出下标为6</button>
    <button class="btn">输出下标为7</button>
    <button class="btn">输出下标为8</button>
    <button class="btn">输出下标为9</button>
  </body>
  <script src="./script.js"></script>
</html>

错误js代码如下

for (var i = 0; i < Btn.length; i++) {
  Btn[i].onclick = function () {
    console.log(i);
  };

这里点击了第一个button标签,输出如下

一般来说,这个题目会碰到的问题就是在用var定义for循环中的变量i时，不管你点击哪个按钮最终打印出来的下标,只会是10，这是因为变量i是var声明的，在全局范围内都有效，因此每一次循环，新的i值都会覆盖旧值，导致最后输出的是最后一轮的i的值。

这里提供三种解决方法:

1.用let定义for循环中的变量i
/* 使用js获取一组10个具有相同class属性的button标签的DOM集合，对每个button添加一个点击事件，输出每个button在这个数组集合中的下标
 */

var Btn = document.querySelectorAll(".btn");
for (let i = 0; i < Btn.length; i++) {
  Btn[i].onclick = function () {
    console.log(i);
  };
简单来说,变量i是let声明时,当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量,也就不会被覆盖

2.利用遍历数组forEach（）函数
/* 使用js获取一组10个具有相同class属性的button标签的DOM集合，对每个button添加一个点击事件，输出每个button在这个数组集合中的下标
 */
var arr = [];
var Btn = document.querySelectorAll(".btn");
for (var i = 0; i < Btn.length; i++) {
  arr.push(i);
  arr.forEach((value) => {
    Btn[value].onclick = function () {
      console.log(value);
    };
  });
}
不清楚forEach()函数的用法可以参考这个大哥的这篇文章js中的foreach用法_ailsa_fan的博客-CSDN博客_foreach用法

3.使用立即执行函数
/* 使用js获取一组10个具有相同class属性的button标签的DOM集合，对每个button添加一个点击事件，输出每个button在这个数组集合中的下标
 */
var Btn = document.querySelectorAll(".btn");
for (var i = 0; i < Btn.length; i++) {
  (function (i) {
    Btn[i].onclick = function () {
      console.log(i);
    };
  })(i);
}
不清楚立即执行函数的可以参考这个大哥的这篇文章【前端教程】详解立即执行函数_奋斗中的编程菜鸟的博客-CSDN博客_立即执行函数