Hi can someone help me with refactoring my button functions?
trying to make 1 function that solves the issue for every button but can't figure how to approach with forEach. also I want alert in my html Element if a field is empty
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';
})}
All the buttons does the same logic but with different values. You can create a helper method that does this with the percentage as input:
const onClick = (percentage) => {
tip.innerHTML = `${((percentage / 100) * billAmount.value) / numOfPeople.value}`
total.innerHTML = `${(billAmount.value / numOfPeople.value) + (((percentage/100) * billAmount.value) / numOfPeople.value)}`
}
You can then create an array for the percentages the different buttons use:
const percentages = [5, 10, 15, 25, 50]
and then you can iterate each button to set the onclicks:
button.forEach((button, index) => {
button.addEventListener('click', () => {
onClick(percentages[index])
})
})