Strange code execution order

[Twey]

Can someone please explain why the bit in red:

function menu(parent, menuarr, layer) {
	parent.style.backgroundColor = "silver";
	theMenu = document.getElementById("menu");
	if(theMenu.innerHTML.indexOf('<p id="menulayer' + layer + '">') == -1) {
		theMenu.innerHTML += "<p id=\"menulayer" + layer + "\">";
	} else {
		theMenu = document.getElementById("menulayer" + layer);
	}
	for(i = 0; i < menuarr.length; i++) {
		if(menuarr[i].indexOf('::') != -1) {
			title = menuarr[i].substring(0, menuarr[i].indexOf('::'));
			url = menuarr[i].substring(menuarr[i].indexOf('::') + 2, menuarr[i].length);
		} else {
			title = menuarr[i].substring(0, menuarr[i].indexOf(';;'));
			url = menuarr[i].substring(menuarr[i].indexOf(';;') + 2, menuarr[i].length);
			url = "javascript:void(0);\" onclick=\"menu(this, " + url + ", " + (layer + 1) + ");";
		}
		theMenu.innerHTML += "<a href=\"" + url + "\">" + title + "</a>";
		if(!(i == menuarr.length - 1)) theMenu.innerHTML += "&nbsp;&bull;&nbsp;";
	}
	theMenu.innerHTML += "</p>";
	theMenu.style.display = "inherit";
}

... is being executed before the bit in green?
It's been bugging me for ages; probably just needs a different viewpoint.

Thanks in advance,

[mwinter]

No doubt you're expecting this answer: it can't be. The loop, its block statement, and all side effects must be completely evaluated before the assignment statements after it are executed. This only way this could be different is if the global setTimeout function is used, or you're dealing with a very broken interpreter.

Without a bare-minimum demonstration though, it's very difficult to explain why you're seeing what you're seeing.

Mike

[Twey]

The output was appearing as "<p></p>menu" instead of "<p>menu</p>".
I think it's because the innerHTML was temporarily invalid, so the browser (Firefox) quickly stuck a </p> in to make it valid. I solved it by putting everything into a variable, then transferring it to innerHTML all at once.

[jscheuer1]

I too have run into situations where innerHTML had to be written at once rather than using the += method. Not sure of why this happens sometimes and not others.

[jscheuer1]

I just did some tests and IE6 will throw an unknown error if you try that with a paragraph. IE will accept a span though but, closes it twice - once after it is written without a closing tag and again when you add the closing tag. FF will close it just as you describe and then ignore the following command to close the paragraph or span as extraneous.

[Twey]

Well, that's that off my mind Thanks to all for the effort.
Now for the next problem: does anyone know why this page throws a "Could not get display property. Invalid argument." error on accessing the menu in IE? Nothing else seems to mind (Firefox, Mozilla, Opera, Epiphany, Konqueror).

P.S. Yes I know it's awful, it's only a rough draft

[jscheuer1]

Yeah, IE's script error reporting leaves much to be desired. I notice you have alot of '!=' where '!==' would be more correct. I'd try replacing those first to see what happens. The only other suggestion I would have is that since there are only 4 written calls to access the display property in the script, try commenting them out one at a time to (hopefully) see where IE chokes.

[Twey]

I've never heard of !==.
What is the difference from !=? (opposite of ===?)

[mwinter]

I've never heard of !==.
What is the difference from !=? (opposite of ===?)

Yes, !== and === are opposites (as are != and == of course).

You probably know the general difference of the two forms from PHP (== type converts, whilst === doesn't).

Mike

[Twey]

You learn something every day. I always used !(a === b) when that was necessary, and avoided it otherwise.

EDIT:
Found problematical line:

45: document.getElementById("menu").style.display = "inherit";

... but can't see what's wrong with it. Have changed offending <div> to a <span>, but still no joy.