Como bien dice el error, addEventListener
no es una función porque getElementsByClassName
devuelve un objeto en forma de array (no es un array como tal) como su nombre indica (elements
) y no un elemento de la DOM concreto. Así que como bien leíste, debes recorrer los distintos elementos y asignarles el evento.
var buttons = document.getElementsByClassName("myButton");
for(var i=0;i<buttons.length;++i) {
var button = buttons[i];
button.addEventListener('click', function(ele) {
var idBoton = ele.target.id;
// haz lo que quieras con este id
console.log(idBoton);
});
}
<button type="button" id="button1" class="myButton">Button 1</button>
<button type="button" id="button2" class="myButton">Button 2</button>
Además, si puedes usar ES6, la última versión de JS, puedes reducir aún más este código y hacerlo incluso más legible.
const buttons = document.getElementsByClassName("myButton");
Array.from(buttons).forEach((button) => {
button.addEventListener('click', (btn) => {
const idBoton = btn.target.id;
// haz lo que quieras con este id
console.log(idBoton);
});
});
<button type="button" id="button1" class="myButton">Button 1</button>
<button type="button" id="button2" class="myButton">Button 2</button>
De cualquiera de las maneras, lo que haces es recorrer la 'lista' de elementos y asignarle a cada uno que, una vez hecho click, ejecutan la función.
Por último, porque personalmente es la que menos recomiendo para separar la lógica JS del HTML sería asignarles a los propios botones una acción HTML.
function botonClicado(boton) {
let idBoton = boton.id;
// haz lo que quieras con este id
console.log(idBoton);
}
<button type="button" id="button1" class="myButton" onclick="botonClicado(this)">Button 1</button>
<button type="button" id="button2" class="myButton" onclick="botonClicado(this)">Button 2</button>
document.getElementsByClassName("nombreClase")
devuelve un array con todos los elementos de la clase seleccionada. Si quieres añadirles a cada uno de ellos un eventListener conaddEventListener
tienes que recorrer dicho array