Learn Form Validation by Building a calorie Counter - step 49

JavaScript
1

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

Hi, I’m completely lost with this step I still don’t understand what innerHTML is and how to use it, all the code I am about to include is from the previous step. All help is appreciated it, Thank you.

This is the problem:
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"
  />`;

}
2

this is the crux, do you understand what do we want to do in this step?
We have created some html, so now we want to add that html somewhere in the page

1 Like
3

ooh i see. but am I going to be using the += to the previous targetInputContainer statement at all? or is it going to be a different variable?

4

yeah, to the already existing one

5

OOOH okay i see now, thank you

1 Like
6

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