Help With: Could not set display property. Invalid argument


#1

Hello,

I have created a small javascript jump menu that is designed to hide/display content depending on the users selection. It works perfectly in firefox, but nothing happens in IE.

The error I get in IE is:
error: could not get the display property. Invalid argument

Can anyone help? As far as I can see I am accessing the DOM correctly and using IE supported display elements. Can you see the problem? Thanks in advance.

Here is the relevant code:
The content being changed

<div id="listing" style="padding:0; margin:0; overflow:auto; border:0; width:100%; height:100%;">
<span id="E" style="display:inline;"><?php require("currentListing/E.html"); ?></span>
<span id="I" style="display:none;"><?php require("currentListing/I.html"); ?></span>
<div >

The jump menu:

<form name="jumpMenu">
<select name="menu" style="background-color: #FFFFFF; font-size: 9px; font-family: verdana; color:#000000; padding: 0; margin: 0;" size="1" onchange="jump(this.form, this.form.menu.options[this.form.menu.selectedIndex].value)">		
<option value="0" selected="selected">Select Announcements</option>
<option value="0">--------------------</option>
<option value="E">External Announcements</option>
<option value="I">Internal Announcements</option>	
</select>
</form>

The javascript:

<script language="javascript">
function jump(form) {
	var myindex=form.menu.selectedIndex
	//if we're choosing to see external announcements
	if (form.menu.options[myindex].value == "E") {
		//then show the external <span>
		document.getElementById("E").style.display = 'inline';
		document.getElementById("I").style.display = 'none';
	//if we want the internal
	} else if (form.menu.options[myindex].value == "I") {
		//then show the external <span>
		document.getElementById("I").style.display = 'inline';
		document.getElementById("E").style.display = 'none';
	} else {
	}
}
//-->
</script>

Any help is very much appreciated.

Thanks.


#2

Your div doesn't have a closing tag, could that be the problem?

Also your onchange is passing two parameters but the event handler accepts one.

To streamline it a bit:

<script language="javascript">
function jump(val) {
	if (val == "E") {
		//then show the external <span>
		document.getElementById("E").style.display = 'inline';
		document.getElementById("I").style.display = 'none';
	//if we want the internal
	} else if (val == "I") {
		//then show the external <span>
		document.getElementById("I").style.display = 'inline';
		document.getElementById("E").style.display = 'none';
	} else {
	}
}
//-->
</script>

...

<select onchange="jump(this.value);">



#3

No, there was actually no problem other then my own incompetence. I am generating this page from a template I created. However, I forget to regenerate the page after updating the code in the template.

All is working now.

Thanks for your help though.


#4