How to get the values of buttons with eventListener?

Question

I created buttons with different values in my HTML. I am trying to output these values when clicked on. I am making use of querySelectorAll and eventListeners but it keeps outputing undefined.

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

You can do it like this:

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>

But you might consider employing event delegation:

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>