Estoy haciendo esta calculadora de propinas que obtuve de frontendMentor. El objetivo de esta app es poner el importe de tu factura. Haga clic en un porcentaje de propina. Agrega el número de personas. El resultado se mostrará en el lado derecho con el monto total de la propina, y ese monto dividido por el número de personas.
La idea es el onclick que, como una matriz de botones, tiene un parámetro que representa el % de propina. Al hacer clic en uno de ellos, activaría mi función con el % de propina correcto y mostraría el monto total a la derecha.
Estoy poniendo el monto de mi factura y hago clic en el botón, pero no pasa nada. Ni siquiera tengo un mensaje de error que pueda depurar.
Soy nuevo en Javascript, y esta tarea fue excelente para mí para practicar la manipulación de DOM. Cualquier idea de usted sería increíble. ¡Gracias!
https://jsfiddle.net/SophQuin/extgo4w9/6/
let myBill = document.getElementById('amount').value; let people = document.getElementById('quantity').value; let customTip = document.getElementById('custom').value; let tipBtn = document.getElementsByClassName('tip'); let totalAmount = document.getElementById('tip-amount').value; let personAmount = document.getElementById('tip-person').value; function total (perc) { totalResult = myBill*perc/100; totalAmount.value = totalResult; }; tipBtn[0].addEventListener('click', total);NOTA: *Es de Frontend Mentor. Habría agregado un botón de enviar o ingresar agregado a la aplicación para activar el cálculo. Pero quiero seguir las instrucciones. *Todavía no codifiqué la propina por persona y el botón de reinicio. Intentaré hacerlo por mi cuenta *El número de personas no puede ser 0, también intentaré descubrir cómo hacerlo por mi cuenta.
Para que funcione, actualice su archivo JS de esta manera
let people = document.getElementById('quantity').value; let customTip = document.getElementById('custom').value; let tipBtn = document.getElementsByClassName('tip'); let totalAmount = document.getElementById('tip-amount'); let personAmount = document.getElementById('tip-person').value; function total (perc) { let myBill = document.getElementById('amount').value; totalResult = myBill*perc/100; totalAmount.value = totalResult; } Dado que está llamando directamente a la función total en el botón, no es necesario agregar esta línea que está registrando el controlador de eventos
tipBtn[0].addEventListener('click', total);Aquí tienes:
let myBill = document.getElementById("amount"); let people = document.getElementById("quantity").value; let customTip = document.getElementById("custom").value; let tipBtn = document.querySelectorAll(".tip"); let totalAmount = document.getElementById("tip-amount"); let personAmount = document.getElementById("tip-person").value; function total(perc) { let myBill = document.getElementById("amount").value; let totalResult = (myBill * perc) / 100; totalAmount.value = totalResult; } });