Learn Form Validation by Building a Calorie Counter - Step 49

JavaScript
1

Tell us what’s happening:

I am not why it keeps saying the same thing over and over again I have not changed my first line and I have followed the instructions

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

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

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 49

2

you placed the label --outside-- the HTMLString literal. You needed to place it inside it (at the end)

1 Like
3 
const calorieCounter = document.getElementById('calorie-counter');
const budgetNumberInput = document.getElementById('budget');
const entryDropdown = document.getElementById('entry-dropdown');
const addEntryButton = document.getElementById('add-entry');
const clearButton = document.getElementById('clear');
const output = document.getElementById('output');
let isError = false;

function cleanInputString(str) {
  const regex = /[+-\s]/g;
  return str.replace(regex, '');
}

function isInvalidInput(str) {
  const regex = /\d+e\d+/i;
  return str.match(regex);
}

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>
}

it is still not working

4

hi there,

the label is still not inside the string literal.

A string literal starts with a backtick ` and ends with a backtick.
So where is the last backtick for the HTMLString located?
Is it before or after the label text you made?

5

it is before the label

6

you want the backtick to surround all the text including the label

7 
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>`
`
}

like this?

8

you need to add the label before the closing backtick, not add more backticks

9

this is the current end of the HTMLString. Do you see that?
So your new code must go after the input element and before the backtick

10 
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>
}

do u mean like this

11

Move those two things, (a template literals string and a semicolon) after

After the above label closing tag.

12 
unction 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> `;
}
13

Remove that from here In above line. Leave it after last line

14 
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> `;
}

is this it

15

You also removed input closing angular bracket.

16

You also have a . in your for attribute value and a space in your label text that should not be there.

  • I would suggest you copy your label element and reset.

  • Now create a new empty line inside the template string and paste the label back in.

  • Then remove the . and the extra space from the label.

1 Like
17 
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> `;
}
18

Input element is not closed.

Remove space before Entry text.

19 
unction 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> `;
}
20

That is why I said to reset. You are changing stuff you shouldn’t.

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" />
  // add the label here, do not change anything else in the template string
  `;
}
1 Like