Learn Form Validation by Building a Calorie Counter - Step 49

JavaScript
1

Tell us what’s happening:

I have tried looking everywhere for this solution but I can’t figure it out. My code doesn’t pass because I need to “add an input element on a new line”.

Can someone help me out, please?

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;
  const HTMLString = `
  <label for="${entryDropdown.value}-${entryNumber}-name">Entry ${entryNumber} Name</label>;
    <input type="text" placeholder="Name" id="${entryDropdown.value}-${entryNumber}-name"/>`;
}

// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 49

2

you don’t use semicolons in HTML, this should not be here after the </label>

3

I deleted the semicolon and it still is saying the same thing.

4

Hi there!

This challenge step is tricky one. if you have added wrong syntax in your code, you should need to reset the challenge and try again. If not works, then post your updated code here.

5

Show your code, because for me that was the only necessary change

6

I appreciate all the feedback! Here is my code:

function addEntry() {
  const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
  const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
  const HTMLString = `
  <label for="${entryDropdown.value}-${entryNumber}-name">Entry ${entryNumber} Name</label>`;
  <input type="text" placeholder="Name" id="${entryDropdown.value}-${entryNumber}-name"/>`
}
7

I tried resetting the code as well.

8

you did not remove the semicolon, you even added back a backtick here

you are not adding the input element inside the template literal, because the template literal terminates here with that backtick

9

Thank you, it worked!