Learn Form Validation by Building a Calorie Counter - Step 81

[Dennis-code153]

Tell us what’s happening:

Hello. There is a problem with my code Please help me. The developer console says: Sorry, your code does not pass. Keep trying.

You should access the innerHTML property of the output element. // running tests

1. You should access the innerHTML property of the output element.
2. You should assign an empty template literal to the innerHTML property of the output element.
   // tests completed
   // console output
   [TypeError: Cannot read properties of undefined (reading ‘split’)]

Your code so far

<!-- file: index.html -->

/* file: styles.css */

/* file: script.js */
// User Editable Region

function calculateCalories(e) {
  e.preventDefault();
  isError = false;

  const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']");
  const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']");
  const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']");
  const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']");
  const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']");

  const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs);
  const lunchCalories = getCaloriesFromInputs(lunchNumberInputs);
  const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs);
  const snacksCalories = getCaloriesFromInputs(snacksNumberInputs);
  const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs);
  const budgetCalories = getCaloriesFromInputs([budgetNumberInput]);

  if (isError) {
    return;
  }

  const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories;
  const remainingCalories = budgetCalories - consumedCalories + exerciseCalories;
  const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit';

  
  const outputElement = document.getElementById('output');

  
  outputElement.innerHTML = ``;
}



// User Editable Region

Your browser information:

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

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 81

freeCodeCamp.org

[zs_akkaya]

In the beginning of the script.js file you already declared an output element. So you just have to access output.innerHtml in this challenge. Do not declare a new outputElement, use output instead.

[hasanzaib1389]

Hi there!

@Dennis-code153

const outputElement = document.getElementById('output');

What you say about the above line of code you added to the challenge editor.?
The instructions is asking you:
Start by assigning an empty template literal to the innerHTML property of the output element on a new line at the end of the function.

@Dennis-code153

outputElement.innerHTML = ``;

[Dennis-code153]

@zs_akkaya

In the beginning of the script.js file you already declared an output element. So you just have to access output.innerHtml in this challenge. Do not declare a new outputElement, use output instead.

OK, I’ve deleted it and my code has now the view:

function calculateCalories(e) {
  e.preventDefault();
  isError = false;

  const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']");
  const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']");
  const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']");
  const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']");
  const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']");

  const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs);
  const lunchCalories = getCaloriesFromInputs(lunchNumberInputs);
  const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs);
  const snacksCalories = getCaloriesFromInputs(snacksNumberInputs);
  const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs);
  const budgetCalories = getCaloriesFromInputs([budgetNumberInput]);

  if (isError) {
    return;
  }

  const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories;
  const remainingCalories = budgetCalories - consumedCalories + exerciseCalories;
  const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit';

  
  

  
  outputElement.innerHTML = ``;
}

[Dennis-code153]

@zs_akkaya

output

If I only use the output instead what should I do with it to solve the problem?

[zs_akkaya]

const output = document.getElementById('output');

At the top part of the script.js you should have this line. Probably you already have. If you do not have this line you can reset the challenge because you wrote this line at the earlier steps of this challenge.

Then you need you write output.innerHTML for this challenge. This will equal to empty template literals.

[Dennis-code153]

Thanks because it is a real solution of the problem.

[zs_akkaya]

Glad to help!! Happy coding

[Dennis-code153]

It is thanks to your help that I was able to complete this project today.

[zs_akkaya]

Congratulations!!! I’m happy for you, and the journey continues