JavaScript循环绑定按钮点击事件时buttons[i]为undefined如何解决

出现buttons[i]为undefined、点击始终触发else分支的问题，由两个叠加的错误导致：

• 闭包陷阱：循环中用var i声明的迭代变量为函数作用域，并非块级作用域，所有绑定的点击事件回调会共享同一个i。循环执行完毕后，i的值会停在buttons.length的位置（如4个按钮时i=4），用户点击触发回调时，访问buttons[i]已发生索引越界，返回值为undefined。
• 逻辑赋值错误：代码中var switcher = buttons[i]获取的是DOM按钮元素对象，后续却将该对象与数字0、1做相等判断，即便i取到正确索引，因类型不匹配判断结果始终为false，必然全部走else分支。

按实现简洁度排序，可按需选择：

• 替换for + var的循环写法，使用forEach遍历按钮节点，通过方法内置的索引参数直接获取当前按钮的对应下标，从根源规避闭包问题
• 若保留基础for循环结构，将循环变量var i替换为let i，利用块级作用域特性，让每次迭代的i值被独立闭包保存，不会被后续循环覆盖
• 若需兼容极老旧浏览器环境，可在每次循环时通过立即执行函数（IIFE）将当前i值传入独立作用域，阻断跨循环的变量共享

window.addEventListener("load", () => {
  const buttons = document.querySelectorAll('.btn');
  // 将NodeList转为标准数组，支持索引取值
  const buttonArr = Array.from(buttons);

  buttonArr.forEach((currentBtn, index) => {
    currentBtn.onclick = function() {
      // 直接获取当前按钮对应的索引，不存在undefined取值问题
      fetch("test.json")
        .then(res => res.json())
        .then(jsonData => {
          const colorList = jsonData['color'];
          // 动态按索引取对应颜色数据，消除冗余代码
          const targetColor = colorList[index];
          
          // 更新标题文本
          const titleEl = document.querySelector('div.api-wrapper h2');
          titleEl.textContent = targetColor.name;
          
          // 替换展示图片
          const oldImg = document.getElementById('bigpic');
          const newImg = document.createElement('img');
          newImg.id = 'bigpic';
          newImg.src = targetColor.image;
          document.querySelector('div.api-wrapper').replaceChild(newImg, oldImg);
        })
    }
  })
})

• 原代码三个if/else分支的fetch请求逻辑完全重复，仅取的color数组下标不同，修正后可通过动态传索引合并重复代码，大幅降低冗余
• 原代码中遍历colorList的循环没有实际业务作用，无论点击哪个按钮都会循环遍历所有color项重复创建DOM，会造成页面节点冗余，修正后仅需更新对应位置的内容即可

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