Much is not clear in any javascript 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" 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;
}

for example, what does the targetInputContainer variable do, what kind of entry is it, how does it work? #${entryDropdown.value} .input-container as far as I know in the selector we write a class or ID, but what is written there is not known

You haven’t provided a step number, so I am not sure which step you are on.

But here is a codepen with the code and extra console statements to show you what those variables are

Open the console and click on the add entry button to see what the variables return

You should see this result

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