Display None In Ie

[meddiecap]

Hi,I'm pretty sure my problem is a common one, but I can't figure it out.It works in FF, but not in IE. The function showpapiergewicht(this.form) shows or hides the selectable weights (gewicht) for each papertype (papiersoort).EDIT: also doesn't seem to work in Chrome and SafariThe function reken(this.form) calculates stuff, but has no influence in this example.I hope someone can help me with this.I have a form that looks like this (it may not be too symantic):

<form>	<fieldset>		<legend>Papiersoort</legend>		<label>HVO:</label>		<input type="radio" name="papiersoort" checked="checked" onclick="showpapiergewicht(this.form); reken(this.form);"/>		<label>Colorcopy:</label>		<input type="radio" name="papiersoort" onclick="showpapiergewicht(this.form); reken(this.form);" />		<label>MC:</label>		<input type="radio" name="papiersoort" onclick="showpapiergewicht(this.form); reken(this.form);" />		<label>Gekleurd papier:</label>		<input type="radio" name="papiersoort" onclick="showpapiergewicht(this.form); reken(this.form);" />		<br />		<select name="grams" onchange="reken(this.form)">			<option id="papier_gewicht1" value="80">80 grms.</option>			<option id="papier_gewicht2" value="90">90 grms.</option>			<option id="papier_gewicht3" value="100">100 grms.</option>			<option id="papier_gewicht4" value="120">120 grms.</option>			<option id="papier_gewicht5" value="160">160 grms.</option>			<option id="papier_gewicht6" value="200">200 grms.</option>			<option id="papier_gewicht7" value="250">250 grms.</option>			<option id="papier_gewicht8" value="300">300 grms.</option>		</select>	</fieldset></form>

And some java script:

function showpapiergewicht(oForm) {	if (oForm.papiersoort[1].checked)	{		document.getElementById("papier_gewicht1").style.display = 'none';		document.getElementById("papier_gewicht2").style.display = 'none';		document.getElementById("papier_gewicht3").style.display = '';		document.getElementById("papier_gewicht4").style.display = '';		document.getElementById("papier_gewicht5").style.display = '';		document.getElementById("papier_gewicht6").style.display = '';		document.getElementById("papier_gewicht7").style.display = '';		document.getElementById("papier_gewicht8").style.display = '';	}	else if (oForm.papiersoort[3].checked)	{		document.getElementById("papier_gewicht1").style.display = '';		document.getElementById("papier_gewicht2").style.display = 'none';		document.getElementById("papier_gewicht3").style.display = 'none';		document.getElementById("papier_gewicht4").style.display = '';		document.getElementById("papier_gewicht5").style.display = '';		document.getElementById("papier_gewicht6").style.display = 'none';		document.getElementById("papier_gewicht7").style.display = 'none';		document.getElementById("papier_gewicht8").style.display = 'none';	}	else if (oForm.papiersoort[0].checked || oForm.papiersoort[2].checked) 	{		document.getElementById("papier_gewicht1").style.display = '';		document.getElementById("papier_gewicht2").style.display = '';		document.getElementById("papier_gewicht3").style.display = '';		document.getElementById("papier_gewicht4").style.display = '';		document.getElementById("papier_gewicht5").style.display = '';		document.getElementById("papier_gewicht6").style.display = '';		document.getElementById("papier_gewicht7").style.display = '';		document.getElementById("papier_gewicht8").style.display = '';	}}

[Ingolme]

Rather than using this.form, try giving the form an ID and accessing it with the getElementById() method.

[meddiecap]

I'm affraid I may need an example of your suggested method.

[Ingolme]

Give the form an ID

<form id="form">

Access the form using the getElementById() method.

showpapiergewicht(document.getElementById("form"))

[meddiecap]

That still only works in FF...

[Ingolme]

Well, you're going to have to go debugging.First, place an alert() right at the beginning of the function to see whether the function is running.And check to see whether "oForm" actually is a form.

function showpapiergewicht(oForm) {  alert(oForm);......

If that works, go checking other things. Place alert() statements around your code to see what's going on.

[meddiecap]

I'll do some alert placing. What do I do when I get an alert?I placed one where u said, and one at the start of the first if-statement in that function.

	if (oForm.papiersoort[1].checked)	{		alert(oForm.papiersoort[1]);

Also, I know for sure that oForm is a form, because this is the only part that doesn't work.IE also doesn't give any js errors.I can post all the other stuff aswell I you need to see it. I'm still working on it and it's 200+ lines, form not included.

[Ingolme]

The alert() should give you some information that's useful to determine what the problem is.Try putting that alert before the if() statement to see whether the checkbox exists.

[meddiecap]

I believe they exist because reken(this.form) is executed when I click on themEDIT: I placed this alert alert(document.getElementById("papier_gewicht1").style.display);afterdocument.getElementById("papier_gewicht1").style.display = 'none';the alert says it is set to 'none', or precisely none, yet it is still visible, still except in FF

[thescientist]

I'll do some alert placing. What do I do when I get an alert?I placed one where u said, and one at the start of the first if-statement in that function.

	if (oForm.papiersoort[1].checked)	{		alert(oForm.papiersoort[1]);

Also, I know for sure that oForm is a form, because this is the only part that doesn't work.IE also doesn't give any js errors.I can post all the other stuff aswell I you need to see it. I'm still working on it and it's 200+ lines, form not included.

alerts are good for debugging because it can display values or, like Ingolme said, it can tell you if things are running. Essentially, whenever you expect something from your code, like a variable to take on a value, or something that should change based on some sort of behavior, adding alert boxes along the way for every change will help you see what value the variable is actually taking on, or if the value of something is changing the way you were hoping it to. By placing it within functions, you can tell what lines of code are executing because you can have an alert statement displaying the functions behavior as it executes and track it to see if its going what you are expecting it to do.

[dsonesuk]

why not just remove, and replace options using array, createElement("option"), and if you require id ref setAttribute() see below:var weightvalues=new Array ();weightvalues[0]= new Array("80", "90", "100", "120", "160", "200", "250", "300")weightvalues[1]= new Array("0", "0", "100", "120", "160", "200", "250", "300")weightvalues[2]= new Array("80", "90", "0", "0", "160", "0", "0", "0")function showpapiergewicht(oForm) { var selectlist = document.getElementById("grams"); selectlist.options.length=0; if (oForm.papiersoort[1].checked) { createoptions(1); } else if (oForm.papiersoort[3].checked) { createoptions(2); } else if (oForm.papiersoort[0].checked || oForm.papiersoort[2].checked) { createoptions(0); } } function createoptions(ref) { var selectlist = document.getElementById("grams"); for (i=0;i<weightvalues[ref].length;i++) { if(weightvalues[ref]!="0") { createoption = document.createElement("OPTION"); createoption.text = weightvalues[ref]+" grms."; createoption.value = weightvalues[ref]; createoption.setAttribute("id","papier_gewicht"+(i+1)) selectlist.options.add(createoption); } } } /*--*//*]]>*/</script>