Learn Form Validation by Building a Calorie Counter - Step 52

JavaScript
1

Tell us what’s happening:

Your other bug occurs if you add a Breakfast entry, fill it in, then add a second Breakfast entry. You’ll see that the values you added disappeared.

This is because you are updating innerHTML directly, which does not preserve your input content. Change your innerHTML assignment to use the insertAdjacentHTML() method of targetInputContainer instead. Do not pass any arguments yet.

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

You should not access the innerHTML property of targetInputContainer.

### Your code so far

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 += HTMLString;
}

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

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

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 52

2

but you do

you should use

3

I typed this: targetInputContainer.insertAdjacentHTML() += HTMLString; and nothing happens when I click on Check Your Code. I don’t know what’s the problem because I do exactly what they ask

4

insertAdjacentHTML doesn’t want the assignment of something, you need to call the method passing the string into the parenthesis

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Ask for Help button located on the challenge (it looks like a question mark). This button only appears if you have tried to submit an answer at least three times.

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

5

Thank you I’ve just re-read the instructions and indeed it was cristal clear. But why did the Check Your Code button didn’t work or warn me?

6

you should look at the console when that happens, if you write a syntax error the code stops working, that include the code to make the button work, not only the code in the editor

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.