0

Tengo 50 botones todos con la misma clase y cada uno con un id diferente (del 1 al 50) y quiero que al darle a uno de los botones se me guarde en una base de datos Indexada el id de ese botón más otros campos que hay en la base de datos. Al poner el document.getElementsByClassName("nombreClase").addEventListener("click", funcionGuardar); me sale el siguiente error:

'document.getElementsByClassName(...).addEventListener is not a function'.

Por lo que he leído por ahí hay que hacer un bucle que vaya recorriendo la clase y coja el id que quieras o algo así, pero no se si no se explican bien o yo no me entero. Agradezco la ayuda.

1
  • 1
    Hola y bienvenido a SOes. Te estás respondiendo tú mismo. 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 con addEventListener tienes que recorrer dicho array
    – Kiko_L
    Commented el 12 mar. 2019 a las 9:43

1 respuesta 1

3

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>

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.