Learn Form Validation by Building a Calorie Counter - Step 49

JavaScript
1

Tell us what’s happening:

I need help with step 49 in “Learning from validation by building a Calorie Counter”. I can’t really understand why my code does not pass. Can someone give me some advice, please?

Your code so far

<!-- file: index.html -->


/* file: styles.css */


/* file: script.js */
// User Editable Region

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">
    <label for="${entryDropdown.value}-${entryNumber}-calories">Entry ${entryNumber} Calories</label>
    <input type="number" placeholder="Calories" id="${entryDropdown.value}-${entryNumber}-calories">
  `;

  targetInputContainer.insertAdjacentHTML('beforeend', HTMLString);
}



// User Editable Region

Your browser information:

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

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 49

1 Like
2

I understand you’re having issues with your code for step 49 of the Calorie Counter project. The problem might be related to the entryDropdown element and how it interacts with the HTML structure. First, ensure that entryDropdown is correctly defined and refers to the appropriate dropdown element. Verify that the HTML structure matches the IDs used in your querySelector calls, and check that the input[type=“text”] selector accurately counts existing fields. Make sure the IDs you generate for the new input fields are unique and do not conflict with existing ones. Adding console.log statements can help you debug by displaying the current values and HTML strings being used. Testing the code in a development environment like Blackbox.ai or locally should help you pinpoint any issues.

1 Like
3

Welcome to our community!

Where did you find the instructions for adding these code lines?

4

Please do not post AI generated content. Thank you

6

I did think that’s an old version just now, thanks for clarification.