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