求助：Uncaught TypeError: 无法读取undefined的innerHTML属性

错误原因 #

1. 你的handleClick函数里的参数i并不是循环里的索引，而是点击事件的事件对象（Event），用这个对象作为索引去取按钮元素，自然会得到undefined，读取innerHTML就会报错。
2. 就算你想传递循环索引，用var声明的i存在变量提升问题——循环结束后所有回调里的i都会变成7，而你大概率没有第8个按钮（索引从0开始），所以document.querySelectorAll("button")[7]也是undefined。

几种可行的解决方法 #

方法一：直接通过事件对象/this获取当前点击的按钮（最推荐） #

不用依赖索引，直接获取触发事件的按钮元素，代码更简洁可靠：

// 先一次性获取所有按钮，避免重复DOM查询
const buttons = document.querySelectorAll("button");
for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", handleClick);
}
function handleClick() {
    // this指向当前被点击的按钮元素
    const name = this.innerHTML;
    alert(name + " got clicked!");
}

或者用事件对象的target属性：

function handleClick(event) {
    const name = event.target.innerHTML;
    alert(name + " got clicked!");
}

方法二：用let声明索引，解决var的作用域问题 #

let会在每次循环时创建独立的变量作用域，保证每个回调拿到的是当前循环的索引：

const buttons = document.querySelectorAll("button");
for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", function() {
        const name = buttons[i].innerHTML;
        alert(name + " got clicked!");
    });
}

方法三：用bind绑定索引 #

如果一定要传递索引，用bind把索引绑定到回调函数上，注意先把按钮集合存起来：

const buttons = document.querySelectorAll("button");
for (var i = 0; i < buttons.length; i++) {
    // 把索引i绑定到handleClick的第一个参数
    buttons[i].addEventListener("click", handleClick.bind(null, i));
}
function handleClick(index) {
    const name = buttons[index].innerHTML;
    alert(name + " got clicked!");
}

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