Learn Form Validation by Building a Calorie Counter Step 52 Lag

Hello, everyone! I am doing the Learn Form Validation by Building a Calorie Counter challenge. Step 52 is lagging real bad. I can’t submit my code.

Often the code can’t be submitted because there are syntax errors in the code. Open up the console pane to see if there are any errors showing. You could also paste your JS in here so we could help you find any errors.

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;
}

Yep, that’s a definite syntax error. If you open the Console pane, do you see the error?

I can see why you did this though, the instructions could perhaps be a little clearer. If you aren’t going to use innerHTML any more, then you don’t need += HTMLString either. So you are replacing all of that with insertAdjacentHTML().

Thank you so much for your help.