2

Cuando deseo agregar un event listener a un objeto del html me aparece en la consola del navegador el error eventlistener is not a function, el codigo es el siguiente. este script se ejcuta en un archivo simple de html.

var btn = document.getElementsByClassName('btn');

btn.addEventListener('click', adding, false);

function adding(e){
  e.preventDefault();
  console.log(e);
}

1 respuesta 1

7

Porque getElementsByClassName() devuelve en un array la cantidad de elementos encontrados, por ende la variable btn es un array y entonces al intentar hacer addEventListener() te dice que no es una función.
Conclusión, lo que deberías hacer es o bien recorrer todos los elementos del array y agregale los eventos o decirle que sólo al primero le cree el evento (eso si sólo si vas a saber que es sólo uno).

En tu caso

Simplemente agregando el índice del primer array:

var btn = document.getElementsByClassName('btn');

btn[0].addEventListener('click', adding, false);

function adding(e){
  e.preventDefault();
  console.log(e);
}

Haciendo un for

La mejor forma para estos casos es crear un for para todos los elementos encontrados:

var btn = document.getElementsByClassName('btn');

for (var i = 0; i < btn.length; i++) {
  btn[i].addEventListener('click', adding, false);
}

function adding(e){
  e.preventDefault();
  console.log(e);
}
6
  • hola he intentado en codepen y ha funcionado de ambas formas el error solo lo arroja la consola de mis navegadores aun siendo codigo js puro, hay alguna solucion???
    – SERGIO
    Commented el 29 abr. 2018 a las 1:08
  • Qué error te arroja?
    – Kleith
    Commented el 29 abr. 2018 a las 4:27
  • en chrome btn.eventListener is not a function! y en firefox btn is null , siendo el mismo codigo que ejecuto en codepen
    – SERGIO
    Commented el 29 abr. 2018 a las 16:11
  • En qué orden está el script de javascript? En el <head> o al final ante de cerrar el </body>?
    – Kleith
    Commented el 29 abr. 2018 a las 16:40
  • en el head! como es comun
    – SERGIO
    Commented el 29 abr. 2018 a las 19:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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