如何使用eventListener获取按钮的值？

Question

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

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()
  });
}); 

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>