Learn Form Validation by Building a Calorie Counter - Step 40

JavaScript
1

Tell us what’s happening:

I completed the code correctly , but the next few steps become confusing because I do not understand how the .value property works. This step introduces the .value property, but I’m confused on what “value” it returns.

Your code so far

Printing out the variable entryDropdown and entryDropdown.value in the console
produces this output.
image

The console output is an object with 5 keys that correspond to the 5 option elements
nested in the select element, but the values are empty.

Why isn’t this object populated with the option element values nested within the select element.?
Also, why does the .value property return breakfast?

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

```This is the part of the HTML code we are working on:


```css
/* file: styles.css */


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

function addEntry() {

}

// 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/131.0.0.0 Safari/537.36

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 40

2

Welcome to the forum @jackratat

Why isn’t this object populated with the option element values nested within the select element.?

              <select id="entry-dropdown" name="options">
                <option value="breakfast" selected>Breakfast</option>
                <option value="lunch">Lunch</option>
                <option value="dinner">Dinner</option>
                <option value="snacks">Snacks</option>
                <option value="exercise">Exercise</option>
              </select>

The option elements store the values for each option. The element with id of entry-dropdown contains five values, however those values belong to the option elements. The select element can only display the currently selected option.

Also, why does the .value property return breakfast ?

You can use the value property to get the value of the selected option.
The .value property retrieves the current selection, which is the default of breakfast.

Happy coding

1 Like
3

Is there a way to populate values into the select element “entryDropdown” object?
image

4

The entryDropdown object is a holder for the currently selected element.
The selected element is accessed using the .value property.

5

for your second Q

whenever there’s text inside of a element and there are no further element html tags inside, textContent of that selected element is the text of t

6

So if an option is “selected” somehow, somewhere in the code how is that object populated.

Right now breakfast is selected, so why doesn’t the entrydropDown object have { ‘0’: {breakfast], …

7

Is this answer complete?