Learn Form Validation by Building a Calorie Counter - Step 41

JavaScript
1

Tell us what’s happening:

Hello, I don’t have a question about how to do the level but about what’s in the document.querySelector. I thought only id’s from HTML could go in the () how is there the targetId variable and what/where in the code is the ’ .input-container’

Your code so far

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


/* file: styles.css */


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

function addEntry() {
  const targetId = '#' + entryDropdown.value;
  const targetInputContainer = document.querySelector(targetId + ' .input-container');
}

// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36 OPR/109.0.0.0

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 41

2

querySelector uses selectors like the css ones you may have learned before.
while getElementById only takes the values of ids.

3

what about the ‘. input-container’

4

I’m not sure what the question is but if it is:

it’s exactly where you might guess it is. In the html:

  <div class="input-container"></div>
5

why are we adding a . and a space?

6

it’s exactly like a regular css selector.
Like when you’re trying to select all elements of a certain class, you add the dot.
The targetId is the parent element.

ps. are you familiar with css selectors?

7

No, I skipped the html and css lessons

8

ah okay. Well selectors are just a type of convention that allows us to ‘select’ different elements as they exist in the HTML.
You can read more here: