0

Estoy intentando hacer que un boton haga una funcion.No me funciona el addEventListener. Escribo la funcion de varias formas pero nada. Hay algo mal?

<!--html--> 
<input type="button"  value="Agregar" class="botoni"></button>

//js
let boton=document.querySelector(".botoni").addEventListener("onclick",()=>{
    alert("ok")
})

en cambio si me funciona con asi, por lo que descarto que el html no este leyendo el js

let boton=document.querySelector(".botoni").setAttribute("onclick", "imprimir()")
7
  • el script para conectar el archivo js lo pongo al final de todo antes q termine el body
    – Nam
    el 20 ene. 2022 a las 18:20
  • 2
    En el addEventListener no es onclick, es click, aunque no tiene mucho sentido que le hagas un let a eso.
    – masterguru
    el 20 ene. 2022 a las 18:21
  • con click tampoco funciona
    – Nam
    el 20 ene. 2022 a las 18:27
  • 1
    Pues mira aqui: jsfiddle.net/gp9kt8Le a mi me funciona
    – masterguru
    el 20 ene. 2022 a las 18:28
  • debo tener algo mal en el html
    – Nam
    el 20 ene. 2022 a las 18:33

1 respuesta 1

0

Tu código tiene un par de detalles:

  • La variable boton no es necesaria. Pero si la vas a usar debes separar el ´addEventListener´ en otra línea, o si no boton quedará como undefined.
  • El evento que quieres oir es click. Tu segundo intento funcionó porque hay un atributo llamado onClick que permite asignar una función al evento click.

Este ejemplo lo puedes probar aquí directamente (haciendo clic en el botón azul "Ejecutar"):

//js
let boton = document.querySelector(".botoni")
boton.addEventListener("click", () => {
  alert("ok")
})
<!--html-->
<input type="button" value="Agregar" class="botoni">

NOTA: Se supone que el HTML se debe cargar antes de ejecutar el JS, en el ejemplo se ven invertidos, pero es por el plugin de ejecución.

UPDATE:

Si son varios botones, puedes usar querySelectorAll, pero necesitarás algo para identificar en cual botón el usuario hizo clic:

//js
let botones = document.querySelectorAll(".botoni")
botones.forEach((item) => {
  item.addEventListener("click", (e) => {
    const nombre = e.target.dataset['nombre']
    alert("ok: " + nombre)
  })
})
<!--html-->
<input type="button" value="Agregar" data-nombre="Juan" class="botoni">
<input type="button" value="Agregar" data-nombre="Maria" class="botoni">
<input type="button" value="Agregar" data-nombre="Carlos" class="botoni">

Otra opción, si tus botones hacen diferentes tareas (agregar, eliminar, modificar...), sería que cada una tenga un id y un eventListener separado.

7
  • 2
    Veo que has dejado el </button> en el html. Ya puestos a crear una respuesta por un fallo tipográfico lo arreglamos todo :-)
    – masterguru
    el 20 ene. 2022 a las 18:44
  • Gracias, corregido!, eso me pasa por copiar y pegar (-_-')
    – Roimer
    el 20 ene. 2022 a las 18:53
  • Gracias! lo que noto que al llamarlo por clase, si tengo varios botones con esa clase, solo funciona el click en el primer elemento. Quizas deberia ponerle id y poner el click a cada id
    – Nam
    el 20 ene. 2022 a las 19:19
  • @Nam deberias ser mas concreto en tu pregunta la próxima vez, explicando con más detalle y sin miedo a colgar más codigo, pues el problema que dices ahora no se corresponde con tu pregunta, sino que es relativo al uso de querySelector, que solo devuelve el primer elemento que encuentra siempre... Si necesitas acceder a todos debes usar querySelectorAll pero de forma distinta, pues debes recorrerlo con un bucle despues.
    – masterguru
    el 20 ene. 2022 a las 19:23
  • es que las preguntar van surgiendo a medida que estudio...jaja gracias igual
    – Nam
    el 20 ene. 2022 a las 19:36

Tu Respuesta

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

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