Learn Form Validation by Building a Calorie Counter Step 46

Instructions:
After your label element, and on a new line in your template string, create an input element. Give it a type attribute set to text , a placeholder attribute set to Name , and an id attribute that matches the for attribute of your label element.

My code looks correct but I receive no feedback after pressing “Check your Code” button.

\<input type=“text” placeholder=“Name” id=“${entryDropdown.value}-${entryNumber}-name”>; \\

please use the Ask for Help button so that your post includes a link to the step and your code correctly formatted. We can’t help without a link to the step and code formatted correctly

There is no Ask For Help Button

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

;
}
\\

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.

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

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

what’s the link to the step?

Learn Form Validation by Building a Calorie Counter: Step 46 | freeCodeCamp.org

1 Like

the input element needs to be added to the string, you can’t write html in a .js file

1 Like

OK.
So after the “label” element, I create an “input” element like so:
<input type=“text” placeholder=“Name id=”${entryDropdown.value}-${entryNumber}-name">

Correct? Otherwise, I don’t know what else to do.

When I click “Check Your Code” nothing happens, no feedback.

yes, but it needs to be inside the string like the rest of html, it can’t go outside of a string

Syntax Errors make the tests not execute, that’s why you don’t get feedback from them

I removed the semi-colon after the label element to add it to the string and nothing happens.

it seems we have an issue here, do you understand how the string you are building is delimited, which are the characters used to surround it?

No, I don’t. Perhaps rewrite the instructions because I’m following them verbatim.
After the label element…
create an input element = check
give it a type attribute = check
give it a placeholder attribute = check
give it an id that matches the “label for” attribute = check

but you are not doing that in the string, that’s the thing.
You have been building the HTMLString in the last couple of steps, but now instead of continuining to build it you have suddenly started writing outside of it. If you write the input element inside the string you will do fine

Got it. I removed the semi-colon but nothing happened. I had to move the ` mark. Thanks for your assistance and patience!

Do not just remove it, make sure that the new input element is also inside the string!
the ` mark takes an important role, it’s not insignificant, you need to know what it does

1 Like