@Sakeran
Posted
Hi! I noticed a few points of interest reading through your code. I think a number of your pain points stem from how you're trying to use addEventListener. For example, this line:
// Obs: 'cash' is just undefined here.
const cash = bill.addEventListener("change", ()=>{
// ...and returning a value here doesn't actually do anything.
return Number(bill.value);
});
As you can see from reading the documentation, addEventListener doesn't have a return value, so we don't gain anything from assigning the result to a variable.
It seems like what you're trying to do here is make the value of cash sync up with the input element. To do that, you'll want something more like:
// Define 'cash' outside of the function's scope...
let cash = 0;
bill.addEventListener("change", () => {
// ...and then we can update the value directly inside of the listener function.
cash = Number(bill.value);
}
A few other points:
- As you've probably noticed, one of the bigger challenges here is in taking the values of multiple inputs and combining them into a single value. I think your strategy of adding the calculate button is a good first step, here. Once you've got the 'calculate' function working correctly, try to think of ways you could run it automatically whenever an input is changed.
- The
Number.isNaN()function could be useful for determining if one of the input values isn't a number. - On a slightly more obscure note, there are actually two events you can use with most input elements. You're using 'change', which fires once whenever a change is committed (with text boxes, this usually means when the enter key is pressed, or when the user clicks away). You could also choose to use 'input', which will fire on every keystroke. You aren't doing anything wrong here, but knowing the difference between the two might save you some headache later on.
Hopefully this was helpful.
Marked as helpful
@Julie-Gz
Posted
@Sakeran Hi Alexander, Thank you so much for the feedback. I followed your advice and created a variable for cash, tipPercentage, and people and set them to 0 and it made the code clearer and easier to understand. I also changed the event type from "change" to "input", In the beginning of the challenge I did use "input" but when I started to get NaN before even adding any inputs I thought "change" would stop that from happening, but that didn't help either. But after following the tips you and the others gave I came across another problem. I wanted to see what the output for each variable was so I added console.log(typeof variable, variable) because even after making these changes I still got NaN in the results, and I found that the people variable kept giving me undefined both as a type and value and I don't know why that is, that's the only issue left I guess. Thanks again for the detailed post, it was beyond helpful. All the best with your projects :)
@Julie-Gz
Posted
@Sakeran I managed to find the issue and solve it. Turns out I was trying to log "people" when it wasn't even defined yet. It's not perfect but I can at least say that I finally completed the challenge. Thanks again for your help :)
