Learn Form Validation by Building a Calorie Counter - Step 63

I tried numerous methods… None of them worked. I tried doing Number(currVal) + calories and it didn’t work… I can’t seem to find the problem please help.

const calorieCounter = document.getElementById('calorie-counter');
const budgetNumberInput = document.getElementById('budget');
const entryDropdown = document.getElementById('entry-dropdown');
const addEntryButton = document.getElementById('add-entry');
const clearButton = document.getElementById('clear');
const output = document.getElementById('output');
let isError = false;

function cleanInputString(str) {
  const regex = /[+-\s]/g;
  return str.replace(regex, '');
}

function isInvalidInput(str) {
  const regex = /\d+e\d+/i;
  return str.match(regex);
}

function addEntry() {
  const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
  const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
  const HTMLString = `
  <label for="${entryDropdown.value}-${entryNumber}-name">Entry ${entryNumber} Name</label>
  <input type="text" id="${entryDropdown.value}-${entryNumber}-name" placeholder="Name" />
  <label for="${entryDropdown.value}-${entryNumber}-calories">Entry ${entryNumber} Calories</label>
  <input
    type="number"
    min="0"
    id="${entryDropdown.value}-${entryNumber}-calories"
    placeholder="Calories"
  />`;
  targetInputContainer.insertAdjacentHTML('beforeend', HTMLString);
}

function getCaloriesFromInputs(list) {
  let calories = 0;
  
  for (let i = 0; i < list.length; i++) {
    const currVal = cleanInputString(list[i].value);
    const invalidInputMatch = isInvalidInput(currVal);

    if (invalidInputMatch) {
      alert(`Invalid Input: ${invalidInputMatch[0]}`);
      isError = true;
      return null;
    }

  Number(currVal);
  calories + currVal;
  }
}

addEntryButton.addEventListener("click", addEntry);`

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Edg/120.0.0.0

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 63

Holy moly I tried like 10 other ways this is getting desperate please help guys…

An addition assignment is a compound operator += (addition + assignment =)

Number returns the converted value, it does not change the original value. You need to assign its return value to calories using +=

someVar += Number(someNumberAsString);
1 Like
function getCaloriesFromInputs(list) {
  let calories = 0;

  for (const item of list) {
    const currVal = cleanInputString(item.value);
    const invalidInputMatch = isInvalidInput(currVal);

    if (invalidInputMatch) {

      alert(`Invalid Input: ${invalidInputMatch[0]}`);
      isError = true;
     return null;
    }   
   Number('currVal');
   calories += Number('currVal');
       
             }
              
             
}

Sorry, your code does not pass. Hang in there.

After your if statement, you should use the addition assignment operator on calories.

currVal is a variable not, a string.

Don’t call Number() twice. Only one time for the assignment.


As an aside.

Number() is used to convert a string to type number, the string must be something that can be converted to a number. The string "currVal" can not be converted to a number so Number() returns NaN.

1 Like

lasjorg has some great responses, kudos for that. To additionally (heh) clarify;

The syntax that the program wants is the variable that you are adding to first, so in this case, that would be calories

and then it wants to know what it’s doing with it, so you assign it an addition operator, which is +=

so, so far we have calories +=

and then you are telling it what you want to add to the variable that you’ve defined. What we want to add currently exists as a variable, but for your code to work, it needs to be a number, so we’re going to use a constructor, Number() to do that, so inside the parentheses of Number(), we’re going to put the variable that we want to assign, which in this case, is currVal, so we put Number(currVal) and then we close it with a semi colon.

All together, it looks like this:

calories += Number(currVal);

If you’re like me, you tried fifty million ways to put currVal or Number first, because that’s what you were trying to define, and at least to me, seemed like the sensible approach, but not according to the correct JavaScript syntax, because it wants to know what you are modifying first, and then how you’re modifying it, and THEN what you are modifying it with.

cheers,
jer