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

[carlbrooks]

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>

[carlbrooks]

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.

[dotkpay]

IE is notorious for not implementing several standards particularly in CSS. You just have to trick the browser into working the way you want it to and be sure the code still works in the other browsers.

Besides IE9 other IE versions can be real nightmares. If your code is written correctly it should be able to work in IE9 atleast.

Testing of newly developed web apps should be done with IE coz its the hard part, if you can get it to work flawlessly in IE then the other browsers will be a piece of cake.

[nogray]

obj.class is invalid, use className (obj.className)