Como dar um evento a vários botões de uma vez?
2 Respostas
Uma forma de fazer é capturando a classe do botão e atribuindo o evento através de um loop na coleção de objetos retornados por getElementsByClassName.
No HTML criei quatro botões com a mesma classe e com identificadores diferentes.
No JS criei uma função (atribuirEvento) que é chamada a cada vez que o for é iterado.
Exemplo:
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);
}
Você pode testar os códigos em https://jsfiddle.net/
O valor no switch case
, neste caso, deve ser uma string que irá comparar a id
do botão clicado. Então seria case "one":
e não case One:
.
Para capturar a id
do botão: e.target.id
.
Isso acima é o que estará na função tdButton
.
Antes é preciso criar uma coleção dos botões adicionando algum tipo de atributo em comum entre eles, o mais comum é usar o class
. Sugiro que inclua em cada botão um class="bts"
(bts
é exemplo, você pode usar o nome que quiser).
Depois fazer um loop adicionando eventListener
em cada botão da coleção:
var tdBt = document.getElementsByClassName("bts");
for(var x=0; x<tdBt.length; x++){
tdBt[x].addEventListener("click", tdButton);
}
Função:
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;
}
}
Exemplo funcional com os códigos juntos:
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>
Ou você pode usar uma outra técnica com 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>