Number of elements in drop down counter

question.length If My understanding based on the details published here are not wrong then it pulls out the number of drop-down items from the <option></option> tag.

But in the case of this code pen example →

It is pulling from the <li> tag.

But here again when I tried to change it to ul and li combination it didn’t work; That means it worked only on the <option></option> CSS element.

Please educate me what is the truth, and how despite in the codepen <option> tag is not there, but still it is working.

“What is the truth”… both.
The thing you’re probably mixing up is what is being selected.

document.getElementById("mySelect").length;

This selects a single element (the element with ID “myselect”), which has a special understood property .length (because it is a select element). It is selecting the parent element and inspecting it’s properties.

    var question = document.querySelectorAll("li.quest");

This in contrast is selecting all of the li elements that also have the class ‘quest’. Selecting a group of elements will return an array, and an array naturally has a .length.

Another alternative is more generic: You could select the ul, and inspect its .children attribute; this is less specific than seeking the li’s, because any direct descendant of the parent element is considered part of this array.

You mean an integral number?

How?

In this case li's will be direct descendants of the ul elements?

Please suggest what blog or chapters should I explore make these points more clear?

Arrays are a type of Javascript default object. Arrays always define a property “length” which contains a constantly updated value equaling the number of elements in the array.

How can you select it, or how is it less specific?
It’s less specific because you can put things in as children of a <ul> that aren’t <li>'s.

<ul>
<p>Wark</p>
<li>First item</li>
</ul>

is still HTML. It will still be interpreted in the browser. It’s not strictly valid HTML, but it can be done.
Also, see the next answer.

In the codepen you’ve linked, yes. However, there are two classes of li inside the ul : some classed ‘quest’ and some classed ‘answ’. The codepen’s selector selects just the ones classed ‘quest’, but the ul’s .children will contain all of the direct descendants.

In that case that approach will be a flaw?

In that code pen why is it essential to write this:
toggleIcon();

If you’re targeting specific li’s then yes, it would be, though you could later filter them. If you just want the number of elements in the list (and the list has been validly constructed), however, it works just fine.

Well the first line of the codepen defines a variable, toggleIcon, which contains the function.
Defining a variable does not trigger the function contained to run. The last line then triggers the function.

1 Like

Thanks. Just like in PHP.

I think this line this.nextElementSibling.classList.toggle("active"); is saying to activate the sibling li.
But it should be deactivated so that it can be activated?

but I can’t see if it is deactivated anywhere even through the css (display: none).

toggle is a flip-condition.
classList.toggle means “If this is in the class list, remove it. Otherwise, add it.”
As far as CSS, you dont need an active and deactive class, if the default CSS is your ‘not active’ behavior, then you can apply the class and overwrite the CSS.

Consider it in simpler terms:
If I define my CSS thusly:

square {
 background-color: red;
 height: 30px;
 width: 30px;
}
.b {
  background-color: blue;
}

and my HTML:

<square id='1'></square>
<square id='2' class='b'></square>
<square id='3'></square>

What color is each of the squares? How big is each of them?
What happens if i add the ‘b’ class to square 3?
What happens if i remove the ‘b’ class from square 2?

1 Like

Red(Only second one blue), 30 X 30.

Color change: Red to Blue.

Color change: Blue to Red.

Well no, the second square starts out blue because it’s already got the class ‘b’. But you’ve got the idea - adding or removing a class can be used to change the CSS styling of an element on the fly.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.