@adram3l3ch
Posted
function updateDOM (){
let billValue = billInput.value;
let tipValue = document.querySelector('input[name="tip"]:checked').value;
let numberOfPeople = peopleInput.value;
let resultTip = calculateTip(billValue, tipValue, numberOfPeople);
let resultTotal = calculateTotal(billValue, tipValue, numberOfPeople);
resultTipElt.innerText = `${resultTip}`;
resultTotalElt.innerText = `${resultTotal}`;
}
function inputHandler (e){
e.stopPropagation;
if (resetButton.getAttribute('disabled') != null) {
resetButton.removeAttribute('disabled');
}
let inputIsEmpty = inputsEmpty();
if ((inputIsEmpty == true)) {
console.log('input empty');
resetButton.setAttribute('disabled',"");
}
let inputIsValid = checkInputs();
if (inputIsValid == true) {
updateDOM()
}
}
function clickHandler (e){
e.stopPropagation;
let inputIsValid = checkInputs();
if (inputIsValid == true) {
updateDOM()
}
}
document
.querySelectorAll("input")
.forEach(element => {
element.addEventListener('input',inputHandler )
element.addEventListener('click',clickHandler )
});
You can convert the repeating code to functions
Marked as helpful
@Yunie08
Posted
@adram3l3ch Thank you so much! I don't know why I find it very difficult to organize my javascript code clean and dry. You input helps a lot !