Learn Form Validation by Building a Calorie Counter - Step 46

JavaScript
1

Tell us what’s happening:

Why is this not working ? Instructions said: After your label element, and on a new line in your template string, create an input element. Isn’t that what I have on my code? Compiler keeps saying that I need to add the input on a new line. I don’t understand why its not working.

Your code so far

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.

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>\n<input type="text" placeholder="Name" id="${entryDropdown.value}-${entryNumber}-name">`      
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 46

2

Remember that template literals do not need the new line special character. You can simply use the enter/return key.

3

Thank you. I have removed the \n and hit the enter key to move to a new line. Still getting error. Now it is also saying "You should not modify your label element. ". Weird thing, I have tried the code on a separate Online JavaScript Compiler and it works fine but not here.

4

You need to also close the input element. How do you do that without writing a closing tag?

5

closed the input element but no luck:

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

Getting this error:
Sorry, your code does not pass. Try again.

You should not modify your label element.

6

there should be a going to new line before the label element, which is not present in your code

7

Hello, could you kindly elaborate on your suggestion ? What do you mean by: “there should be a going to new line before the label element” ? I appreciate your help; I’ve tried everything suggested previously and it is still not working.

8

put the cursor in front of the label element and press enter to go to a new line

9

Thanks a million. It worked. I guess I simply didn’t understand the instructions very well. Thanks again. :pray