嗨，有人能帮我重构我的按钮功能吗?

Question

嗨，有人能帮我重构我的按钮功能吗?

试图使一个功能，解决每个按钮的问题，但无法计算如何与forEach接近。另外，我想在我的html元素警报如果字段是空的

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';
})}

Answer 1

所有按钮执行相同的逻辑，但具有不同的值。您可以创建一个助手方法，使用百分比作为输入来执行此操作:

const onClick = (percentage) => {
tip.innerHTML = `${((percentage / 100) * billAmount.value) / numOfPeople.value}`
total.innerHTML = `${(billAmount.value / numOfPeople.value) + (((percentage/100) * billAmount.value) / numOfPeople.value)}`
}

你可以为不同按钮使用的百分比创建一个数组:

const percentages = [5, 10, 15, 25, 50]

，然后你可以迭代每个按钮来设置onclicks:

button.forEach((button, index) => {
button.addEventListener('click', () => {
onClick(percentages[index])
})
})