for循环绑定onclick事件索引异常的原因及解决方法

这是个很经典的闭包作用域问题，我来给你拆解清楚：

问题根本原因 #

你用var声明了循环变量i，而var的作用域是函数级的——整个for循环里只有一个i变量。当循环结束时，i的值已经变成了2（因为playersTeam1长度是2，循环条件i < 2，最后一次循环后i自增到2才退出）。

而每个点击事件的回调函数都是在循环结束后才执行的，它们捕获的是同一个i变量的引用，不是循环时的具体值。所以不管点哪个按钮，最终都会用i=2去拼接ID，指向player-points-2。

快速修复方法 #

有两种简单的方式可以解决这个问题：

1. 改用let声明循环变量 #

let是ES6引入的，它的作用域是块级的——每次循环都会创建一个新的i变量，每个点击回调捕获的是当前循环迭代的那个i值：

for (let i = 0; i < playersTeam1.length; i++) {
  document.getElementById("button-points-" + i).onclick = function () {
    inc("player-points-" + i)
  }
}

2. 用立即执行函数(IIFE)创建独立作用域 #

如果需要兼容ES5环境，可以用立即执行函数把每次循环的i值封装到独立作用域里，让回调函数捕获当前迭代的具体值：

for (var i = 0; i < playersTeam1.length; i++) {
  // 把当前i作为参数传入，创建独立作用域
  (function(index) {
    document.getElementById("button-points-" + index).onclick = function () {
      inc("player-points-" + index)
    }
  })(i);
}

更适合动态场景的实现方式 #

因为球员数量是动态变化的，逐个循环绑定事件其实不是最优解，推荐用事件委托——只给父容器绑定一次事件，利用事件冒泡来处理所有按钮的点击。这样不管后续新增多少球员，都不需要重新绑定事件。

实现步骤： #

1. 先给按钮添加data属性，直接存储对应的目标ID（比解析按钮ID更优雅）：

<button class="mr-2 px-10 py-3 bg-blue-900 rounded-lg text-xl flex justify-center text-gray-100 point-btn"
   id=<%= players[i].points_button %>
   data-target-id="<%= players[i].points_id %>">
     ↑
</button>

（这里给按钮加了个专门的类point-btn，方便后续筛选）

2. 给父容器（比如表格的<tbody>，根据你的实际HTML结构调整）绑定点击事件：

// 找到父容器，这里假设是tbody
document.querySelector('tbody').addEventListener('click', function(e) {
  // 判断点击的元素是加分按钮
  if (e.target.classList.contains('point-btn')) {
    // 从data属性获取目标ID
    const targetId = e.target.dataset.targetId;
    inc(targetId);
  }
});

除此之外，也可以用数组的forEach方法遍历，forEach的回调函数本身会形成独立作用域，每个迭代的参数都是独立的：

playersTeam1.forEach((player, index) => {
  document.getElementById(`button-points-${index}`).onclick = () => {
    inc(`player-points-${index}`);
  };
});

内容的提问来源于stack exchange，提问作者splurring