Jump to content

JavaScript Quiz Script Does Not Work In IE7


Presto-X

Recommended Posts

I have a simple script I wrote in javascript, it seems to be working in IE 8/9, and the latest versions firefox, safari, and chrome.  In IE7 it display the worrning message saying the incorrect answer is selected even when the correct answer is selected.  Please take a look at my attached code, if there is a better way to rewrite the JavaScript to work with the current HTML please let me know.

 

<script type="text/javascript">
function checkanswers(){
// get element ids
var question1 = document.getElementById('question1');
var question1error = document.getElementById('question1error');
var question2 = document.getElementById('question2');
var question2error = document.getElementById('question2error');
// check if the first question is answered correctly if not display error message
if(question1.checked == false){
	question1error.style.display="block";
}else{
	question1error.style.display="none";
}
// check if the second question is answered correctly if not display error message
if(question2.checked == false){
	question2error.style.display="block";
}else{
	question2error.style.display="none";
}
// check to see if both questions are answered correctly if so submit the form
if(question1.checked == true && question2.checked == true){
	document.form1.submit();
}else{
	return false;
}
};
</script>

<form id="form1" name="form1" method="post" action="" onsubmit="return checkanswers();">
<strong>What does 1 + 2 equal?</strong><br />
<label><input type="radio" name="question1" value="1" /> 2</label><br />
<label><input type="radio" name="question1" value="2" id="question1" /> 3</label><br />
<label><input type="radio" name="question1" value="3" /> 4</label><br />
<div class="errorWrapper">
<div id="question1error" class="error">The answer above is incorrect; please try again.</div>
</div>

<strong>What does 3 + 5 equal?</strong><br />
<label><input type="radio" name="question2" value="1" id="question2" /> 8</label><br />
<label><input type="radio" name="question2" value="2" /> 9</label><br />
<label><input type="radio" name="question2" value="3" /> 10</label><br />
<div class="errorWrapper">
  <div id="question2error" class="error">The answer above is incorrect; please try again.</div>
</div>
<input name="" type="submit" value="CONTINUE" id="submit" class="button" onclick="checkanswerserrors();" />
</form>

 

I'm not great with JavaScript so any help in getting this script working with IE7 would be greatly appreciated

 

Thanks guys

Link to comment
Share on other sites

You have two errors,

1. is an undefined function in the submit button onclick="checkanswerserrors();" Just remove that

2. You can't have the name of a radio and the be the same (e.g. <input name="question1" id="question1"). Change your id to something different, like var question1_radio or q1...

 

Link to comment
Share on other sites

You have two errors,

1. is an undefined function in the submit button onclick="checkanswerserrors();" Just remove that

2. You can't have the name of a radio and the id be the same (e.g. <input name="question1" id="question1"). Change your id to something different, like var question1_radio or q1...

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.