Learn Form Validation by Building a Calorie Counter Step 41

JavaScript
1

Hello,
after targetId retrieves the .value of the input/selector, does querySelector read the code as “refer to the id of class input-container”?

2

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Help button located on the challenge. This button only appears if you have tried to submit an answer at least three times.

The Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

3

Noted, will do so if applicable. In this case, I understood what the exercise required and got the solution. The question was clarification if my understanding of it’s syntax was correct.

4

if you don’t show the syntax you are talking about we have no idea what to base the answer on

5

Was posting the solution not against the rules?
Edit: I found a post that it’s alright if meant for discussion.

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

In the case of querySelector referencing a variable and a class. This line means “querySelector” method was used on “document”, the html. Look for the indicated ID with the class of input-container’.

const entryDropdown = document.getElementById('entry-dropdown');

The ID works because it had been assigned to the variable entryDropdown earlier, meaning it’s a part of the document targetInputContainer is querying to. (?)

6

let’s do line by line:

this one selects one element with the specified id, so entryDropdown is a reference to that element

this one takes the value from entryDropdown (if you look at the HTML each option has a different value, depending on which one is selected, that will be the value)
and that is saved in targetId with the # symbol in front
when you have the # in a selector, it’s an id selector, able to select elements with that id

so when then this line is executed:

the querySelector selects the element with class .input-container inside the element with the id that comes from the value

1 Like
7

Thank you! I have a much clearer picture of what happens now~

The next steps uses HTMLString to create <elements> which references the target. .innerHTML is then used on the target to determine where the buttons will be placed (in the HTML)