我有几个按钮，单击时我想访问每个按钮的ID…关于如何触发此按钮的任何想法？

Question

<button class="number" id="clear">c</button> <br />

var number = document.querySelectorAll(".number");
for(var i = 0; i < number.length; i++){
number[i].addEventListener('click', () => {
   alert('The clicked id is:' + this.id);
 }); <br />

预期答案：

点击的ID为：清除

Answer 1

您需要向箭头函数提供事件参数（例如，e），并使用e.target访问元素：

var number = document.querySelectorAll(".number");
for (var i = 0; i < number.length; i++) {
  number[i].addEventListener('click', (e) => {
    alert('The clicked id is:' + e.target.id);
  });
}

<button class="number" id="clear">c</button> <br />
<button class="number" id="delete">d</button> <br />
<button class="number" id="empty">e</button> <br />

或者，您可以使用this来访问元素，但可以通过常规功能进行访问：

var number = document.querySelectorAll(".number");
for (var i = 0; i < number.length; i++) {
  number[i].addEventListener('click', function() {
    alert('The clicked id is:' + this.id);
  });
}

<button class="number" id="clear">c</button> <br />
<button class="number" id="delete">d</button> <br />
<button class="number" id="empty">e</button> <br />

Answer 2

var number = document.querySelectorAll(".number");
for(var i = 0; i < number.length; i++){
  number[i].addEventListener('click', function() {
    alert('The clicked id is:' + this.id);
  });
}

Answer 3

您需要用常规函数声明替换箭头函数，还需要在for循环中使用let i。这是由于以下事实：在循环中使用var时，您会在每次迭代时覆盖对i的现有引用，因此，无论您单击哪个按钮，它都将始终引用i的最后一个值。 let关键字的作用域是块范围，因此，每次迭代时，都会将i的全新实例传递给事件侦听器。