Learn Form Validation by Building a Calorie Counter - Step 49

JavaScript
1

Tell us what’s happening:

Hello what’s wrong here?

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

// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.0.1 Safari/605.1.15

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 49

1 Like
2

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

1 Like
3

you need to continue the template literal, and add the requried thigns before the backtick at the end of the template literal

1 Like
4

I’m trying. I think I’ve made an error somewhere, “You should add an input element on a new line.”

1 Like
5

Show me an example if necessary.

6

Hello can you give me an example of what my code should look like?

7

Even though you are putting the input on a new line, it’s still part of the same template literal string, it’s the same statement in JS, and so you don’t end the template literal string and you don’t put a semicolon.

const String = `
  <element></element>
 <element></element>`;

Look at the backticks and semicolons here, where they go. It’s all one statement just broken into lines to make it easier to read.

const String = `<element></element><element></element>`;
1 Like
8

I’m stuck show me a full statement example.

9

I showed you an example.

What are you stuck with?

1 Like
10

Maybe it’s closing the strings I’ve tried the first part of your example but I’m still getting it wrong.

1 Like
11

Let’s see it, please share your updated code

1 Like
12

<input type="text" placeholder="Name" id="${entryDropdown.value}-${entryNumber}-name"></input>

1 Like
13 
<input type="text" placeholder="Name" id="${entryDropdown.value}-${entryNumber}-name"></input>
1 Like
14

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like
15

Nothing wrong with this part. Look at the example I showed you and post that whole string, both the label and input

1 Like
16

I looked this is a blunder

1 Like
17

please post more of your code if you still need help

1 Like
18

It’s still the same troubleshooting.

}

type or paste code here
1 Like
19

post everything you have inside the editor

1 Like
20 
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"></input>
}
1 Like