Hola, ¿alguien puede ayudarme a refactorizar las funciones de mis botones?
tratando de hacer 1 función que resuelva el problema para cada botón pero no puedo entender cómo abordar con forEach. también quiero una alerta en mi elemento html si un campo está vacío
const alert = document.querySelector(".alert") const billAmount = document.querySelector(".input-box-bill-amt") const button = document.querySelectorAll(".percent-buttons") const numOfPeople = document.querySelector(".input-box-num-people") const tip = document.querySelector(".tip-amount") const total = document.querySelector(".tip-amount-total") const reset = document.querySelector(".reset") if(billAmount || numOfPeople = " "){ alert.innerHtml = "Please make sure you fill in every field" }else{ button[0].addEventListener('click', () => { tip.innerHTML = `${((5 / 100) * billAmount.value) / numOfPeople.value}`; total.innerHTML = `${(billAmount.value / numOfPeople.value) + (((5 /100) * billAmount.value) / numOfPeople.value)}` }) button[1].addEventListener('click', () => { tip.innerHTML = `${((10 / 100) * billAmount.value) / numOfPeople.value}`; total.innerHTML = `${(billAmount.value / numOfPeople.value) + (((10 / 100) * billAmount.value) / numOfPeople.value)}` }) button[2].addEventListener('click', () => { tip.innerHTML = `${((15 / 100) * billAmount.value) / numOfPeople.value}`; total.innerHTML = `${(billAmount.value / numOfPeople.value) + (((15 / 100) * billAmount.value) / numOfPeople.value)}` }) button[3].addEventListener('click', () => { tip.innerHTML = `${((25 / 100) * billAmount.value) / numOfPeople.value}` total.innerHTML = `${(billAmount.value / numOfPeople.value) + (((25 /100) * billAmount.value) / numOfPeople.value)}` }) button[4].addEventListener('click', () => { tip.innerHTML = `${((50 / 100) * billAmount.value) / numOfPeople.value}` total.innerHTML = `${(billAmount.value / numOfPeople.value) + (((50 /100) * billAmount.value) / numOfPeople.value)}` }) reset.addEventListener('click', () => { billAmount.value = ''; custom.value = ''; numOfPeople.value = ''; tip.innerHTML = '00.00'; total.innerHTML = '00.00'; })}Todos los botones tienen la misma lógica pero con valores diferentes. Puede crear un método auxiliar que haga esto con el porcentaje como entrada:
const onClick = (percentage) => { tip.innerHTML = `${((percentage / 100) * billAmount.value) / numOfPeople.value}` total.innerHTML = `${(billAmount.value / numOfPeople.value) + (((percentage/100) * billAmount.value) / numOfPeople.value)}` }Luego puede crear una matriz para los porcentajes que usan los diferentes botones:
const percentages = [5, 10, 15, 25, 50]y luego puede iterar cada botón para configurar los clics:
button.forEach((button, index) => { button.addEventListener('click', () => { onClick(percentages[index]) }) })