使用模板字符串无法获取元素，循环注入按钮后事件监听失效

嘿，这个问题我太熟了！你遇到的是JavaScript里var声明变量的经典闭包坑——函数作用域导致的变量共享问题，我来给你拆解清楚，再给几个靠谱的解决方案：

问题根源 #

你用var在循环里声明的i是函数级作用域，也就是说整个addEvents函数里只有一个i变量。所有点击事件的回调函数都会共享这个i，当循环结束时，i已经变成了someNumber（循环的终止值）。所以当你点击任何按钮时，回调里用到的i都是这个最终值，自然达不到你预期的“对应按钮触发对应逻辑”的效果。

解决方案 #

1. 用let替代var（ES6+最简洁方案） #

let是块级作用域，每次循环迭代都会创建一个全新的i变量，每个回调函数捕获的都是当前循环那一轮的i值，完美解决变量共享问题：

function addEvents () {
  for (let i=0 ; i < someNumber ; i++) { 
    const btn = document.getElementById(`button${i}`);
    btn.addEventListener('click', function () {
      console.log(`你点击了按钮 ${i}`);
      // 这里写你的点击逻辑
    });
  }
}

2. 立即执行函数（IIFE）创建闭包（兼容旧环境） #

如果你的项目需要兼容不支持ES6的旧浏览器，可以用立即执行函数把每次循环的i值封装成局部变量，让回调函数捕获这个独立的变量：

function addEvents () {
  for (var i=0 ; i < someNumber ; i++) { 
    // 用IIFE把当前i值存到currentIndex里
    (function(currentIndex) {
      const btn = document.getElementById(`button${currentIndex}`);
      btn.addEventListener('click', function () {
        console.log(`你点击了按钮 ${currentIndex}`);
        // 这里写你的点击逻辑
      });
    })(i);
  }
}

3. 事件委托（更高效的进阶方案） #

如果你的按钮数量很多，或者后续可能会动态新增按钮，事件委托是更优的选择——不用给每个按钮单独绑定事件，而是把监听加在它们的父元素#list上，利用事件冒泡来处理点击：

function addEvents () {
  const listContainer = document.getElementById('list');
  listContainer.addEventListener('click', function (event) {
    // 确认点击的是我们的按钮
    if (event.target.tagName === 'BUTTON' && event.target.id.startsWith('button')) {
      // 从ID里提取按钮索引
      const buttonIndex = event.target.id.replace('button', '');
      console.log(`你点击了按钮 ${buttonIndex}`);
      // 这里写你的点击逻辑
    }
  });
}

这种方法不仅性能更好，还能自动处理后续新增的按钮，不用再重新调用addEvents。

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