How to put events on multiple buttons at once?

Asked

Viewed 1,126 times

0

How to give an event to multiple buttons at once?

inserir a descrição da imagem aqui

javascript
  • 2

    Do not add code in image form, this will help you. Edit the question with the code in text form. Use CONTROL+K to format it.

2 answers

3


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

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

In the JS created a function (ascribe wind) which is called every time it is iterate.

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 on https://jsfiddle.net/

  • Man this helped me a lot thank you...

1

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

To capture the id button: e.target.id.

That above is what will be in function tdButton.

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

Then make a loop adding eventListener on each button of 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>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.