Блог

Главная - Вопросы по программированию - Привет, кто-нибудь может помочь мне с рефакторингом моих функций кнопок?

Привет, кто-нибудь может помочь мне с рефакторингом моих функций кнопок?

#javascript

Вопрос:

Привет, кто-нибудь может помочь мне с рефакторингом моих функций кнопок?

пытаюсь создать 1 функцию, которая решает проблему для каждой кнопки, но не могу понять, как подойти с помощью 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';
})}

Комментарии:

1. Можете ли вы также добавить html-код? Также, пожалуйста, укажите, работает ли ваш код currecnt должным образом или нет. Если вы ищете рефакторинг

2. спасибо за отзыв,добавлю его в следующий раз, ответ Андреаса охватывает решение.

Ответ №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])
  })
})
Метки: ,