Learn Form Validation by Building a Calorie Counter - Step 51

JavaScript
1

I just can’t figure out what to do. Please help.

function addEntry() {
  const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
  const entryNumber =  targetInputContainer.querySelectorAll('input[type="text"]').length;
   const existingInputsCount = targetInputContainer.querySelectorAll('input[type="text"]').length;
    const entryNumber = existingInputsCount + 1;
  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;
}

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.

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/122.0.0.0 Safari/537.36

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 51

2

These are the instructions " Try adding a couple of entries to the Breakfast category, and you may notice some bugs! The first thing we need to fix is the entry counts – the first entry should have a count of 1, not 0.

This bug occurs because you are querying for input[type="text"] elements before adding the new entry to the page. To fix this, update your entryNumber variable to be the value of the length of the query plus 1. Add this on your declaration line, not in your template strings."

3

hello and welcome to fcc forum :slight_smile:

  • you have duplicate variable “entryNumber”
  • simply add “1” to “entryNumber” without adding anymore variables

happy coding :slight_smile:

4

Thanks, it worked. i was just being silly and overthinking it

1 Like
5

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