Learn Form Validation by Building a Calorie Counter - Step 43

JavaScript
1

Tell us what’s happening:

Unable to understand the difference in required code and my code

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

// 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/134.0.0.0 Safari/537.36 Edg/134.0.0.0

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 43

2

Welcome to the forum :wave:

entryDropdown.value is a variable, so treat it the exact same way you used targetId, it’s just a different variable name. The # is not part of the variable name, but it will be the first character in your template literal string.

1 Like
3

did not understand still?

4

what issue are you having?

5 
function addEntry() {
  const targetInputContainer = document.querySelector(`#${entryDropdown.value}.input-container);
}

i modified the code still no good

6

where are you ending the template literal? you have a syntax error

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
7

Hi,
You have started your template literal using a backtick (`) character, and it looks like you’re on track. To keep going, have a look at the MDN documentation about template literals to see examples of the syntax to use.

1 Like
8

Reset this step and look at the original code again.

  const targetInputContainer = document.querySelector(`${targetId} .input-container`);

Actually your new code is VERY close:

const targetInputContainer = document.querySelector(`#${entryDropdown.value}.input-container);

You replaced the variable and added the # well. Look at these two lines together and see what you are missing:

document.querySelector(`${targetId} .input-container`);
document.querySelector(`#${entryDropdown.value}.input-container);

Look for spacing and punctuation differences.

1 Like