Learn Form Validation by Building a Calorie Counter - Step 73

Regarding Step 73 of the captioned course, I have two questions that I hope someone can help me with.

Referring to the instructions, does it mean that even if inputs are set as numbers in HTML, JavaScript will still treat them as non-numbers, unless we add functions that turn them into numbers?

Also, why does “budgetNumberInput” require brackets, while others such as “breakfastNumberInputs” do not? Isn’t the calorie budget only inputted once in the form?

Thank you in advance for your kind help!

1 Like

It is a string, the number type just makes it so you can’t type in letters (other than e before/between numbers).

The budgetNumberInput element is obtained using getElementById which returns a single element. The elements obtained inside the calculateCalories function all use querySelectorAll which returns a NodeList. The getCaloriesFromInputs expects an array to be passed to it.

As an aside, in my opinion, the getCaloriesFromInputs function should have that responsibility and not the consumer of the function. It can easily be coded to accept both a single element or an array of elements without it being the consumer of the API’s responsibility. Just like how querySelectorAll always returns a NodeList even if it only finds a single element.