为何在此场景中无法使用this.innerHTML获取按钮内容？

你没法用this.innerHTML的核心原因是箭头函数不绑定自身的this上下文：

• 箭头函数的this直接继承自外层作用域（这里就是你写循环的外层作用域，比如全局作用域），而非指向触发点击事件的按钮元素。
• 普通函数表达式会自动把this绑定到触发事件的DOM元素上，换成普通函数就能正常使用this.innerHTML。

给你两种可行的解决办法：

方法1：改用普通函数表达式 #

var buttons = document.querySelectorAll('.drum');

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    playSound(this.innerHTML);
  });
}

方法2：在箭头函数里使用事件对象的target属性 #

箭头函数中可以通过事件参数获取触发元素，以此替代this：

var buttons = document.querySelectorAll('.drum');

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', (e) => {
    playSound(e.target.innerHTML);
  });
}

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