Learn Form Validation by Building a Calorie Counter - Step 42

[masha2]

Tell us what’s happening:

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 YaBrowser/24.1.0.0 Safari/537.36

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 42

freeCodeCamp.org

  const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
  const entryNumber = targetInputContainer.querySelectorAll('input[type="text"].length');
  console.log(entryNumber)
}

why doesn’t the code work?
why is the variable not displayed in the console?

[WongYC-66]

@masha2

.length

Why is this inside the querySelectorAll( ) ?

[masha2]

I never understood how to write code correctly, since no one ever teaches this, so I write it as I understand it, and it’s also not clear to me why the variable is not displayed in the console

[WongYC-66]

let x = document.querySelectorAll("div") // this will return Nodelist, very similar to array
console.log(x)
console.log(x.length)  // to get the size of NodeList, you can access with .length

When i typed this into F12 console at random page. i see this

You read more here . HTML DOM Document querySelectorAll() Method

[masha2]

why when I enter thisconst HTMLString =
Entry ${entryNumber} Name; console.log(HTMLString)
in the function the console does not output anything

[WongYC-66]

Are you still solving step 42?

[jwilkins.oboe]

@masha2

in the function the console does not output anything

If you are writing everything inside the addEntry function, then any console statement will not show up until you call the function.

This is an example of a function call

function addEntry() {
  const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
  const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]');
  console.log("does this show up")
}

addEntry()

You should see this result in the console

[masha2]

Now it is no longer there, as always, by a happy accident, I took the length out of brackets, and everything went away.

[masha2]

@jwilkins.oboe

entryNumber

I see this too, but why don’t I see the targetInputContainer and enterNumber variables?

[jwilkins.oboe]

@masha2

but why don’t I see the targetInputContainer and enterNumber variables?

if you run this code, you should see two empty objects

function addEntry() {
  const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
  const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]');
  console.log(targetInputContainer)
  console.log(entryNumber)
}

addEntry()

The reason why you are seeing two empty objects there, is because we haven’t made any selections in our app for breakfast, lunch ,dinner, etc.

In the following steps, you will add the functionality that will make it possible to make a selection in the dropdowns here

When you do that, then you will be able to log out those variables and actually see content instead of empty objects.