0
267
Views¿Obtener el valor del botón de entrada cuando se hace clic en un solo botón?
Así que hice esta fórmula para mi botón de entrada.
function addTip() { let tip = document.querySelectorAll("input[type=button]"); tip.forEach((item) => { item.addEventListener("click", (event) => { console.log(item.value); }); }); }HTML
<input type="button" value="3" onClick="addTip()"> <input type="button" value="5" onClick="addTip()"> <input type="button" value="7" onClick="addTip()">Mi problema es que cada vez que hago clic en un botón una vez, no pasa nada, luego lo vuelvo a hacer clic y muestra en la consola el valor pero también muestra (3) porque pasa por todos los botones
como esto
¿Cómo llego a donde, si hago clic en un botón, mostrará el valor 3, pero luego, si hago clic en el siguiente botón, cambiará el valor para mostrar solo 5?
Básicamente, hacer una opción de botón de propina y querer que las personas elijan su propina
2 answers
Answer question0
No está agregando oyentes hasta la primera llamada addTip , que estará en el primer clic del botón (y luego agregará nuevos oyentes en cada clic posterior).
En su lugar, simplemente llame a addTip() en su javascript y elimínelo del onClick en cada botón.
function addTip() { let tip = document.querySelectorAll("input[type=button]"); tip.forEach((item) => { item.addEventListener("click", (event) => { console.log(item.value); }); }); } addTip(); // <-- call addTip() once in the js <input type="button" value="3"> <input type="button" value="5"> <input type="button" value="7">Delegación de eventos
Una solución más limpia es utilizar la delegación de eventos . Aquí usando Element.matches() para verificar si se ha hecho clic en un botón relevante y luego registrando event.target.value .
document.addEventListener("click", (event) => { if (event.target.matches("input[type=button]")){ console.log(event.target.value); } }); <input type="button" value="3"> <input type="button" value="5"> <input type="button" value="7">0
prueba esto :
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <input type="button" value="3"> <input type="button" value="5"> <input type="button" value="7"> <script > function addTip() { let tip = document.querySelectorAll("input[type=button]"); tip.forEach((item) => { item.addEventListener("click", (event) => { console.log(item.value); }); }); } addTip() </script> </body> </html>