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.
onclick
, esclick
, aunque no tiene mucho sentido que le hagas unlet
a eso.