如何使用事件监听器获取按钮的值？

Question

我在HTML中创建了具有不同值的按钮。我试图在单击时输出这些值。 我正在使用querySelectorAll和eventListeners，但它一直输出未定义。

let buttons = document.querySelectorAll('button');
function showNumber() {
  if (buttons.value != 5) {
    document.getElementById('screen').innerHTML = buttons.value;
  } else {
    document.getElementById('screen').innerHTML = 5;
  }
}
buttons.forEach(buttons => {
  buttons.addEventListener("click", () => {
    showNumber()
  });
}); 

- osi_okorie

---

通常最好的做法是不要将forEach循环的内部变量命名为与数组相同的名称。buttons.forEach(button=>{... 此外，如果你的示例中有一些HTML代码，那会非常有帮助。 - Daniel

你的 showNumber 函数应该接收一个 Event，并且你应该使用它的目标属性来获取所需的信息。 - tripathiakshit

Answer 1

你可以这样做：

const
  buttons = document.getElementsByTagName("button"),
  screen = document.getElementById('screen');

Array.from(buttons).forEach(button =>
  button.addEventListener("click", showNumber));

function showNumber(event) { // Listener can access its triggering event
  const button = event.target; // event's `target` property is useful
  if (button.value != 5) { screen.innerHTML = button.value; }
  else { screen.innerHTML = 5; }
}

<button value="5">Button 1</button>
<button value="42">Button 2</button>

<p id="screen"></p>

但是你可能考虑使用事件代理：

const
  container = document.getElementById('container'),
  screen = document.getElementById('screen');
container.addEventListener("click", showNumber); // events bubble up to ancestors

function showNumber(event) {
  const clickedThing = event.target;
  if(clickedThing.tagName == 'BUTTON'){ // makes sure this click interests us
    screen.innerHTML = clickedThing.value;
  }
}

<div id="container">
  <button value="5">Button 1</button>
  <button value="42">Button 2</button>
</div>

<p id="screen"></p>

- Cat

Answer 2

在您的foreach循环中，您需要将按钮传回到您的函数中。

let buttons = document.querySelectorAll('button');
function showNumber(button) {

  if (button.value != 6) {
    document.getElementById('screen').innerHTML = button.value;
  } else {
    document.getElementById('screen').innerHTML = 5;
  }
}


buttons.forEach(button => {

  button.addEventListener("click", () => {
    showNumber(button)
  });
}); 

<button value=10>10</button>
<button value=8>8</button>
<button value=6>6</button>
<button value=4>4</button>
<button value=2>2</button>

<div id='screen'></div>

- DCR

---

不是最“干净”的解决方案，但肯定是修复OP代码最快的方法。 - Anis R.

Answer 3

问题在于buttons是按钮的整个数组，而不仅仅是被点击的按钮。

要访问被点击的按钮，最简单的方法是使用this。在事件处理程序内部，this指向触发事件的元素（即被点击的按钮），只要我们将函数showNumber直接绑定到事件处理程序上（而不是像您初始代码中那样从匿名函数调用showNumber()），即：

button.addEventListener("click", showNumber);

因此，直接将showNumber绑定到事件处理程序并使用this，这是我们可以做的：

let buttons = document.querySelectorAll('button');
function showNumber() {
  document.getElementById('screen').innerHTML = this.value;
}
buttons.forEach(button => {
  button.addEventListener("click", showNumber);
}); 

<p id="screen"></p>
<button value="1">1</button>
<button value="10">10</button>

---

编辑：移除了 showNumber 函数内不必要的 if 语句。

- Anis R.