My code does not work in Internet Explorer but works on all other major browsers

JavaScript
1

I have a function which allows the number of buttons selected depending on the number selected from the drop down menu. Problem is that this code works in all of the major browsers except for Internet Explorer (No Suprise). For example if user chose the number 3 from the dropdown menu, then user can only select 3 buttons.

Why is it not working in Internet explorer and what can be used to make it work in Internet Explorer?

Below is javascript functions:


function getButtons()
{
	document.getElementById("answerA").class="answerBtnsOff";
	document.getElementById("answerA").setAttribute("class","answerBtnsOff");
	document.getElementById("answerA").setAttribute("className","answerBtnsOff");
 
	document.getElementById("answerB").class="answerBtnsOff";
	document.getElementById("answerB").setAttribute("class","answerBtnsOff");
	document.getElementById("answerB").setAttribute("className","answerBtnsOff");
 
	document.getElementById("answerC").class="answerBtnsOff";
	document.getElementById("answerC").setAttribute("class","answerBtnsOff");
	document.getElementById("answerC").setAttribute("className","answerBtnsOff");
 
	document.getElementById("answerD").class="answerBtnsOff";
	document.getElementById("answerD").setAttribute("class","answerBtnsOff");
	document.getElementById("answerD").setAttribute("className","answerBtnsOff");
 
	document.getElementById("answerE").class="answerBtnsOff";
	document.getElementById("answerE").setAttribute("class","answerBtnsOff");
	document.getElementById("answerE").setAttribute("className","answerBtnsOff");
 
	currenttotal=0;
}
function btnclick(btn)
{
 	if(document.getElementById("numberDropId").value=="")
 	{
	 	alert('You must first select the number of answers you require from the drop down menu');
	 	return false;
	}
	if (btn.class=="answerBtnsOn")
	{
		btn.class="answerBtnsOff";
		btn.setAttribute("class","answerBtnsOff");
		btn.setAttribute("className","answerBtnsOff");
 
		currenttotal--;
		return false;
	}
 	if(document.getElementById("numberDropId").value==currenttotal)
 	{
 	 	alert('You are not allowed beyond the limit of the number of answers you require, deselect other button');
 		return false;
 	}
	if (btn.class=="answerBtnsOff")
	{
		btn.class="answerBtnsOn";
		btn.setAttribute("class","answerBtnsOn");
		btn.setAttribute("className","answerBtnsOn");
		currenttotal++;
		return false;
	}
 
}

If you html code then this is below:

<form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validateForm(this);" >
<table id="middleDetails" border="1">
<tr>
    <td>Question:</td> 
    <td rowspan="3">
        <textarea rows="5" cols="40" name="questionText"></textarea>
    </td>
    <td>Option Type:</td> 
    <td>
        <select name="optionDrop" onClick="getDropDown()">
<option value="">Please Select</option>
<option value="abc">ABC</option>
<option value="abcd">ABCD</option>
<option value="abcde">ABCDE</option>
<option value="trueorfalse">True or False</option>
<option value="yesorno">Yes or No</option>
</select>
    </td>
<tr>
<td colspan="2"></td>
<td>Number of Answers:</td>
<td>
<span id="na">N/A</span>
<select name="numberDrop" id="numberDropId" onChange="getButtons()">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
</table>
</form>
2

Well there could be quite a few reason’s this could not work but the 2 that pop to my head is some doc types don’t work well in IE…So make sure you have the latest doc type heading.

Also make sure you that your IE allows javascript

3

setAttribute can be a little buggy in IE. (http://reference.sitepoint.com/javascript/Element/setAttribute)

Do you perhaps have a test page to look at so we can see all the JS/HTML involved?

4

setAttribute normally works fine for me.

But look in your browser’s error console. The error console in my IE9 tells me exactly what your error is.

And I get the same error in my FF8 error console.

Another way to find your errors is to place alert() statements in your code to check values of variables and if parts of your code are reached. A couple of alert()'s in your code should quickly tell you where your problem is.

Edit:

oh and btw, you have a validation error in your html as well.

5

http://jsfiddle.net/a4Def/9/

This shows my code. The dropdows do not do its functions in jsfiddle but if you copy code to you html page then it should work.

6

Post the error messages you’re getting.