How to put events on multiple buttons at once?

Navigation
0

How to give an event to multiple buttons at once?

    
asked by anonymous 27.01.2018 / 16:12

2 answers

3

One way to do this is by capturing the button class and assigning the event through a loop in the collection of objects returned by getElementsByClassName .

In HTML I created four buttons with the same class and with different identifiers.

In JS I created a function ( AssignEvent ) that is called each time the for is iterated.

Example:

HTML 

<!DOCTYPE html>
<html>
<body>

  <button id="b1" class="btn">Clique me</button>
  <button id="b2" class="btn">Clique me1</button>
  <button id="b3" class="btn">Clique me2</button>
  <button id="b4" class="btn">Clique me3</button>
  <p id="frase"></p>

</body>
</html>

Java Script 

function atribuirEvento(id, texto){      
    document.getElementById(id).addEventListener("click", function(){
    document.getElementById("frase").innerHTML = "Clicou no botão " + texto;});
}
//Busca todos os elementos da classe 'btn'
var x = document.getElementsByClassName('btn');

for (i = 0; i < x.length; i++){
    var ev = x[i].id;
    var texto = x[i].innerHTML;
    atribuirEvento(ev, texto);
}

You can test the codes at link

    
27.01.2018 / 16:55
1

The value in switch case , in this case, must be a string that will compare the id of the clicked button. Then it would be case "one": and not case One: .

To catch the id of the button: e.target.id .

This above is what will be in the tdButton function.

Before you need to create a collection of the buttons by adding some kind of attribute in common between them, the most common is to use class . I suggest that you include in each button a class="bts" ( bts is an example, you can use whatever name you want).

Then loop by adding eventListener to each button in the collection: 

var tdBt = document.getElementsByClassName("bts");

for(var x=0; x<tdBt.length; x++){
   tdBt[x].addEventListener("click", tdButton);
}

Function: 

function tdButton(e){

   var btValor = e.target.id;

   switch(btValor){
      case "one":
      Result = "1";
      alert(Result);
      break;

      case "two":
      Result = "2";
      alert(Result);
      break;

      case "tree":
      Result = "3";
      alert(Result);
      break;

   }

}

Functional example with codes together: 

window.onload = function(){
   
   var One = document.getElementById("one");
   var Two = document.getElementById("two");
   var Tree = document.getElementById("tree");
   
   var tdBt = document.getElementsByClassName("bts");
   
   for(var x=0; x<tdBt.length; x++){
      tdBt[x].addEventListener("click", tdButton);
   }
   
   function tdButton(e){

      var btValor = e.target.id;

      switch(btValor){
         case "one":
         Result = "1";
         console.log(Result);
         break;

         case "two":
         Result = "2";
         console.log(Result);
         break;

         case "tree":
         Result = "3";
         console.log(Result);
         break;

      }
      
   }
   
}
<button class="bts" id="one">1</button>
<button class="bts" id="two">2</button>
<button class="bts" id="tree">3</button>

Or you can use another technique with dataset : 

window.onload = function(){
   
   var One = document.getElementById("one");
   var Two = document.getElementById("two");
   var Tree = document.getElementById("tree");
   
   var tdBt = document.getElementsByClassName("bts");
   
   for(var x=0; x<tdBt.length; x++){
      tdBt[x].addEventListener("click", tdButton);
   }
   
   function tdButton(e){

      var btValor = document.getElementById(e.target.id).dataset.v;

      console.log(btValor);      

   }
   
}
<button class="bts" data-v="1" id="one">1</button>
<button class="bts" data-v="2" id="two">2</button>
<button class="bts" data-v="3" id="tree">3</button>
    
27.01.2018 / 20:17
What's the difference between these options for creating Form Delphi? Operate elements of an array