No error or even warning, but my subLevel won't open & close

JavaScript
21

The op’s query is in #15

22

Okay, with that example from the previously mentioned post, the stylesheet causes the sublevel to not be displayed.
The JavaScript looks to see if the inline style is ‘block’. Since the inline style is undefined, JavaScript just gets an empty string and goes on to your else condition, which adds an inline style of ‘block’. From there, the code works as you would expect.

23

So as I see it, the key point is

which consistent with what [COLOR=#000000]sdleihssirhc and I said earlier.

The op’s code works but not for the reason he was thinking originally.

[/COLOR]

24

Okay, with that example from the previously mentioned post, the stylesheet causes the sublevel to not be displayed.
The JavaScript looks to see if the inline style is ‘block’. Since the inline style is undefined, JavaScript just gets an empty string and goes on to your else condition, which adds an inline style of ‘block’. From there, the code works as you would expect.

I’m afraid that still doesn’t make me understand. Two questions:

  1. Why doesn’t it work that way in my first example (= first post of this thread)? Why is there a difference between my first example and second example (seventh post of this thread)?
  2. Could you elaborate on the principle that Javascript adds an inline style declaration at an else condition? Why/how? I’ve written scientific articles on statistics, but this logic completely baffles me.
25

This is the code that you’re talking about (I have added braces to the else condition, just for clarity):


if (children[c].style.display == 'none') {
    children[c].style.display = 'block';
    parent.style.backgroundImage = 'url(images/vakje_min.gif)';
} else {
    return;
}

The if condition is checking if the inline style on the element equals ‘none’. Since the page doesn’t have any inline style on that element, and no other scripting has added an inline style to that element beforehand, it will be an empty string that it gets instead.

When you use methods such as elem.style display, it is not the CSS stylesheet that JavaScript is interacting with. Instead, it is an attribute on the element called style.

For example:


<p>A line of text.</p>
<p style="display: none">A hidden line of text.</p>

When JavaScript attempts to get the style.display property from the first paragraph tag, there is no style attribute on that element, so JavaScript will only get an empty string from that request.
With the second paragraph tag, style.display would result in JavaScript getting the following string: “none”

When JavaScript sets a style property, such as style.display, it edits the inline style attribute if one is there, and if an inline style attribute isn’t there is creates one for the element, containing the appropriate style assignment instead.

26

I’m sorry guys, but this is not helping me at all. I’m still waiting for a clear answer on why my first example doesn’t work and my second does. I’ll try it somewhere else.