Learn Form Validation by Building a Calorie Counter - Step 49

JavaScript
1

Tell us what’s happening: I have tried this a few ways following the example where using HTMLString.innerHTML and targetInputContainer.innerHTML. Do I still need the `` to call the other and I even tried to move the innerHTML to the end of the const targetInputContainer.

Your code so far

Add your new HTMLString to the targetInputContainer by using the innerHTML property. Remember to use the += operator to add to the existing HTML instead of replacing it.

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" 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.innerHTML += `${HTMLString}`;
  HTMLString.innerHTML += `${targetInputContainer}`;
}

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.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

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

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 49

2

HTMLString is already a string, you don’t need to use a template literal. Depending on how it is tested that will make it not work

3

and HTMLString is a string not a node, so it doesn’t have an innerHTML property, this is bad syntax. Delete this line.

4

It seems I am getting the same error and I am not sure. I only have the line without the “…bad syntax. Delete this line.” you mentioned and it is still telling me I have an error. What is the correct syntax to make this step work?

/>`;
  targetInputContainer.innerHTML += `${HTMLString}`;
}
5

do not use a template literal, HTMLString is already the string you need, you don’t need to concatenate anything.

Next time please open your own topic if you need help

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.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.