Learn Form Validation by Building a Calorie Counter - Step 52

I have no clue wtf does it want me to do!

It says as follows:
" 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."

And I’ve done it, I changed “.innerHTML” to “.insertAdjacentHTML()” and I doesn’t fucking work

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

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 52

Hi there and welcome to our community!

Change your innerHTML assignment to use the insertAdjacentHTML() method of targetInputContainer instead. Do not pass any arguments yet.

You don’t concatenate using += when using the .insertAdjacentHTML() method. Instead, you will pass arguments inside the parentheses. For now, though just add the method, with empty parentheses (i.e. remove += HTMLString).

Thanks, bro. I’m just dumb then lol… I just could not see it, my bad.

I understand that passing arguments to the insertAdjacentHTML() removes the need to concatenate to the string (only after reading this post), but if we’re just learning a new method, perhaps this should have been noted in the step? Not criticizing and I’m sure you’re not responsible for the wording of this step, but just wanted to put that thought out there if you have access to those who are responsible for making edits (I know this is beta ;-)). The only information we noobs get from this step is we’re not supposed to pass arguments yet.

A note to all the noobs like me, when nothing seems to happen when you try to check your code, check the “Console” tab in the “Preview” panel on the right, and it should give you some error messages that could give you some sort of lead on what the issue is. I always forget about that tab lol. For example, when I checked my code before making the corrections for this step, I received the following:

SyntaxError: unknown: Invalid left-hand side in assignment expression. (32:2)

30 | placeholder=“Calories”
31 | />`;

32 | targetInputContainer.insertAdjacentHTML() += HTMLString;
| ^
33 | }
34 |
35 | addEntryButton.addEventListener(“click”, addEntry);
SyntaxError: unknown: Invalid left-hand side in assignment expression. (32:2)

30 | placeholder=“Calories”
31 | />`;

32 | targetInputContainer.insertAdjacentHTML( ) += HTMLString;
| ^
33 | }
34 |
35 | addEntryButton.addEventListener(“click”, addEntry);
SyntaxError: unknown: Invalid left-hand side in assignment expression. (32:2)

30 | placeholder=“Calories”
31 | />`;

32 | targetInputContainer.insertAdjacentHTML() += HTMLString;
| ^
33 | }
34 |
35 | addEntryButton.addEventListener(“click”, addEntry);

Thank you for this! I was having the same issue, and would have never thought that the += HTMLString needed to be removed.