Is it possible to listen to multiple buttons with a single addeventlistener() ? If it is possible How to do it with pure javascript?

Question

</div id ="num-vol">
  <div>
    <button type="button" class="quina" value="1">01</button>
    <button type="button" class="quina" value="2">02</button>
    <button type="button" class="quina" value="3">03</button>
    <button type="button" class="quina" value="4">04</button>
    <button type="button" class="quina" value="5">05</button>
    <button type="button" class="quina" value="6">06</button>
    <button type="button" class="quina" value="7">07</button>
    <button type="button" class="quina" value="8">08</button>
</div>

want to click the button and the value appear in a textarea without having to use an addeventlistener() for each button

Answer 1

With a for, after selecting the elements by class, you can assign a eventListener for all at once.

var botoes = document.body.querySelectorAll(".quina");

for(var x=0; x<botoes.length; x++){
   botoes[x].addEventListener("click", function(){
       document.body.querySelector("#calc").value = this.value;
   });
}

<textarea id="calc"></textarea>
<br>
<button type="button" class="quina" value="1">01</button>
<button type="button" class="quina" value="2">02</button>
<button type="button" class="quina" value="3">03</button>
<button type="button" class="quina" value="4">04</button>
<button type="button" class="quina" value="5">05</button>
<button type="button" class="quina" value="6">06</button>
<button type="button" class="quina" value="7">07</button>
<button type="button" class="quina" value="8">08</button>

Answer 2

You can also use onclick

var botoes = document.querySelectorAll('.quina');
for (let i = 0; i < botoes.length; i++) {
  botoes[i].onclick = function(e) {
      document.querySelector('#resultado').value += 'Botão número: ' + e.target.value + '\n';
    };
}

<textarea id="resultado"></textarea>
<hr />
<button type="button" class="quina" value="1">01</button>
<button type="button" class="quina" value="2">02</button>
<button type="button" class="quina" value="3">03</button>
<button type="button" class="quina" value="4">04</button>
<button type="button" class="quina" value="5">05</button>
<button type="button" class="quina" value="6">06</button>
<button type="button" class="quina" value="7">07</button>
<button type="button" class="quina" value="8">08</button>

Answer 3

A way to do it without having to loop by adding the event on all buttons:

var textarea = document.getElementById('resultado');

document.getElementById('buttons').addEventListener('click', function(element) {
  textarea.innerText = element.path[0].value || '';
})

<textarea id="resultado"></textarea>

<div id="buttons">
<button type="button" class="quina" value="1">01</button>
<button type="button" class="quina" value="2">02</button>
<button type="button" class="quina" value="3">03</button>
<button type="button" class="quina" value="4">04</button>
<button type="button" class="quina" value="5">05</button>
<button type="button" class="quina" value="6">06</button>
<button type="button" class="quina" value="7">07</button>
<button type="button" class="quina" value="8">08</button>
</div>

Answer 4

What you can do is apply the addEventListener in the relative, for example:

document.querySelector(".botoes").addEventListener("click", function(e) {
  if (e.target.value !== undefined && e.target.classList.contains('quina')) {
    alert(e.target.value)
  }
});

<div class="botoes">
  <button type="button" class="quina" value="1">01</button>
  <button type="button" class="quina" value="2">02</button>
  <button type="button" class="quina" value="3">03</button>
  <button type="button" class="quina" value="4">04</button>
  <button type="button" class="quina" value="5">05</button>
  <button type="button" class="quina" value="6">06</button>
  <button type="button" class="quina" value="7">07</button>
  <button type="button" class="quina" value="8">08</button>
</div>

In this case there is only one addEventListener, the value of each button is precisely obtained through the target present in the callback. However, in this case all click done inside the div.botoes will issue a callback, so is used the e.target.classList.contains('quina') to ensure that the target has the class quina and also that it has a value, e.target.value !== undefined.

Answer 5

I believe that the best solution is to create callback independently and indicate that it will be the callback of the buttons.

For example:

var adicionarValor = function(evt) {
    // Dentro do objeto evt esta o target, e o target tem um value:
    var txt = document.querySelector("#txt");
    txt.innerHTML += evt.target.value + " \n";
};


// Sera executado apos o carregamento da pagina
window.onload = function() {
    // vamos pegar todos os botoes:
    var botoes = document.querySelectorAll(".quina");
    for(var i=0;i<botoes.length;i++) {
      var botao = botoes[i];
      
      // O jeito correto e padronizado de incluir eventos no ECMAScript
      // (Javascript) eh com addEventListener:
      botao.addEventListener("click", adicionarValor);
    }
 };

button {
  display: inline;
  font-size: 1.2em;
}

#txt {
  width: 90%;
  height: 200px;
}

<html>

<body>
  <h1>Exemplo</h1>
  <button type="button" class="quina" value="1">01</button>
  <button type="button" class="quina" value="2">02</button>
  <button type="button" class="quina" value="3">03</button>
  <button type="button" class="quina" value="4">04</button>
  <button type="button" class="quina" value="5">05</button>
  <button type="button" class="quina" value="6">06</button>
  <button type="button" class="quina" value="7">07</button>
  <button type="button" class="quina" value="8">08</button>
  <button type="button" class="quina" value="9">09</button>
  <button type="button" class="quina" value="10">10</button><br>
  <textarea id="txt"></textarea>
</body>

</html>