@joshdail
Posted
I would suggest having the code for the error message in a separate function outside of your calculateAndDisplayValues function. That way calculateAndDisplayValues is focused just on the math, and you have another function focused just on the error message.
So you could pull your error handling code outside of calculateAndDisplayValues and put it inside an event listener, something like this:
document.getElementById("people").addEventListener("click",() => {
let people = document.getElementById("people").value;
// Convert the number of people to a number:
/* If you want to treat the value as a number,
you can use the parseInt() or parseFloat() functions to convert it to a number. */
people = parseInt(people, 10);
// Check if the number of people is a valid number:
if (isNaN(people) || people <= 0) {
// Display an error message if the value is not valid:
document.getElementById("error").innerHTML = "Can't be zero";
document.getElementById("people").classList.add("invalid");
return;
} else {
document.getElementById("error").innerHTML = "";
document.getElementById("people").classList.remove("invalid");
}
})
Then in calculateAndDisplayValues, you would still need to make sure that there is a valid input for number of people so you don't get NaN or divide by zero errors. You could have a line of code that checks to make sure there is a valid value before the function does the math, like this:
if (people <= 0 || isNaN(people) {
return;
}
let tipAmountPerPerson = (billAmount * tipPercentage) / 100 / people;
Since the error message is taken care of by a separate function, you don't have to worry about it here in calculateAndDisplayValues. Here you're just concerned with making sure the math part of it works.
I hope this is helpful.
Marked as helpful
@kxnzx
Posted
@joshdail Yes great! It is working now. Thank you so much! I still have one little issue though....the outline stays red after typing in a number greater > than 0, or in other words the classlist invalid is not being removed.
document.getElementById("people").addEventListener("click", () => {
let people = document.getElementById("people").value;
// Convert the number of people to a number:
/* If you want to treat the value as a number,
you can use the parseInt() or parseFloat() functions to convert it to a number. */
people = parseInt(people, 10);
// Check if the number of people is a valid number:
if (isNaN(people) || people <= 0) {
// Display an error message if the value is not valid:
document.getElementById("error").innerHTML = "Can't be zero";
// Make the outline red if the value is not valid:
document.getElementById("people").classList.add("invalid");
return;
} else {
document.getElementById("error").innerHTML = "";
document.getElementById("people").classList.remove("invalid");
return;
}
});
@joshdail
Posted
@kxnzx Ok so I looked at your solution code and I think I figured it out. I had a few errors in my code from my earlier comment. I put "click" instead of "input" for the event listener, and I forgot about checking for an empty string. Here's a version of your event listener with the bug fixes:
document.getElementById("people").addEventListener("input", () => {
let people = document.getElementById("people").value
if (people === "") {
// If the input is empty, remove the error message and return out of the function
removeError()
return
}
// Convert the number of people to a number:
/* If you want to treat the value as a number,
you can use the parseInt() or parseFloat() functions to convert it to a number. */
people = Number(people)
// Check if the number of people is a valid number:
if (isNaN(people) || people <= 0) {
// Display an error message if the value is not valid:
document.getElementById("error").innerHTML = "Can't be zero"
// Make the outline red if the value is not valid:
document.getElementById("people").classList.add("invalid")
return
} else {
// If there is a valid number, remove the error message
removeError()
return
}
})
function removeError() {
document.getElementById("error").innerHTML = ""
document.getElementById("people").classList.remove("invalid")
}
In the code above I made a separate function that gets called by the event handler to remove the error messages, either if the input value is empty or if there is a valid number. I find breaking the code into smaller functions can help a lot either with finding where errors are coming from, or if you need to update or change the code later.
Marked as helpful
@kxnzx
Posted
@joshdail Hello Joshua, yes now it functions correctly :) I have also incorporated the removeError function inside the reset button, otherwise the error would stay active. Thank you so much for your help! I appreciated! ;)
