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

Navigation
0

</divid="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>

I want to click the button and the value appears in a textarea without having to use an addEventListener () for each button

    
asked by anonymous 29.04.2018 / 02:39

5 answers

0

I believe the best solution is to create the 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>
    
29.04.2018 / 04:18
0

With for , after selecting the elements for the class, you can assign a eventListener to 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>
    
29.04.2018 / 02:47
0

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>
    
29.04.2018 / 02:50
0

A way to do without looping by adding the event to 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>
    
29.04.2018 / 03:25
0

What you can do is to apply addEventListener to 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 a single addEventListener , the value of each button is precisely obtained through the target present in the callback. However, in this case every click done within div.botoes will issue a callback, so e.target.classList.contains('quina') is used to ensure that the target has the quina class and also that it has a value, e.target.value !== undefined . / p>     

29.04.2018 / 03:33
Simulate click without calling function directly .load DIV from another site and replacing URL after load