Learn Form Validation by Building a Calorie Counter - Step 54

JavaScript
1

Tell us what’s happening:

I tried to forums but I am still not understanding. What am I doing wrong?

Your code so far

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


/* file: styles.css */


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

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.innerHTML += insertAdjacentHTML();
}

// 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/126.0.0.0 Safari/537.36

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 54

2

hi and welcome to the fcc forum.

The code you wrote is trying to publish the returned value of a function called insertAdjacentHTML()
I believe this is not what the step wanted.
Instead let’s look at the step instructions again.
First you had this code:
targetInputContainer.innerHTML += HTMLString;
This code was updating the targetInputContainer with a new html string.
They said that: “… because you are updating innerHTML directly, [this] does not preserve your input content…”, and the end result of the current code will cause “…the values you added [for breakfast item before] disappeared.”

So to stop that, they want:

Change your innerHTML assignment to use the insertAdjacentHTML() method of targetInputContainer instead

The key words here are ‘use the insertAdjacentHTML() method of targetInputContainer’. I know you probably don’t know what a method is, but it means function. So in other words, they are saying you should call the function insertAdjacentHTML() which is defined in the targetInputContainer.

So put these two words together (in the correct order) with a dot in the middle and you will have done it.

Another example of a function being called on a container is when you call document.querySelector(…) This is a function called querySelector which is defined in the ‘document’ container.

So hopefully you see what I’m trying to say here and change the line of code to call the function instead of directly setting the innerHTML value.

5 Likes