Javascript redirecting to wrong page
Question
So I'm creating a simple 1 question multiple choice quiz and depending on the answer submitted I want it to redirect the user to a corresponding page. However, my problem is that no matter what input I submit I'm directed to the same page even if I submit the correct answer. Can someone scan through my code to see if maybe its a slight syntax error that I'm missing.
Code:
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml-strict.dtd">
<html>
<head>
<title>International Business</title>
<style type="text/css">
.myIndent{
margin-left: 2em;
}
</style>
<script type="text/javascript">
function submitQuestion(){
var response = document.getElementById('answer').value;
if (response == 'C'){
location="correct.html";
} else {
location="wrong.html";
}
return false;
}
</script>
</head>
<body>
<form>
<p>31.) As long as international businesses _________, Islamic countries are likely to be receptive to those businesses.</p>
<div class="myIndent">
<label>A.)<input type="radio" name="answer" id="answer" value="A">employ Muslim people</label><br />
<label>B.)<input type="radio" name="answer" id="answer" value="B">have property in an Islamic nation<label><br />
<label>C.)<input type="radio" name="answer" id="answer" value="C">behave in a manner that is consistent with Islamic ethics</label><br />
<label>D.)<input type="radio" name="answer" id="answer" value="D">adhere to Islamic beliefs</label><br />
</div>
<br /><br />
<input type="submit" value="Submit" onclick="return submitQuestion()">
<input type="reset" value="Cancel">
</form>
</body>
</html>
Edit: even when I change the line if(response=='C') to if(response=="C") i still have the same problem
3 answers
solution1
3 2014-11-14 16:35:16
You can only have 1 ID. document.getElementById('answer'); will get the first element it comes to.
Advice
Unless your students are in elementary school, I cannot advise that you should write a quiz like this; unless its more of an exercise to learn the right answer. If it's grading based on regurgitation, then there are too many ways for someone to happen upon the answer without having to read the question.
function submitQuestion() {
var possible_answers = document.getElementsByName('answer');
var selection;
for (var i=0,n=possible_answers.length; i<n; i++){
if(possible_answers[i].checked === true){
selection = possible_answers[i].value;
break;
}
}
if (selection == 'C') {
window.location = "correct.html";
} else {
window.location = "wrong.html";
}
return false;
}
Fixed HTML Syntax:
<form>
<p>31.) As long as international businesses _________, Islamic countries are likely to be receptive to those businesses.</p>
<div class="myIndent">
<label>A.)<input type="radio" name="answer" value="A" />employ Muslim people</label>
<label>B.)<input type="radio" name="answer" value="B" />have property in an Islamic nation</label>
<label>C.)<input type="radio" name="answer" value="C" />behave in a manner that is consistent with Islamic ethics</label>
<label>D.)<input type="radio" name="answer" value="D" />adhere to Islamic beliefs</label>
</div>
<input type="submit" value="Submit" onclick="return submitQuestion();">
<input type="reset" value="Cancel">
</form>
A little more CSS:
.myIndent {
margin-left: 2em;
margin-bottom: 2em;
}
.myIndent label {
display:block;
}
solution2
1 ACCPTED 2014-11-14 16:44:14
On Label A.), <labe> should be <label>
On Label B.) you don't have a closing </label> tag
You can't have multiple elements with the same ID "answer"
Try something like this:
function submitQuestion() {
var response = document.getElementsByName('answer');
for (var i = 0; i < response.length; i++) {
if (response[i].checked) {
response = response[i].value;
}
}
if (response == 'C') {
location = "correct.html";
}
else {
location = "wrong.html";
}
return false;
}
This function gets all of the elements with the name "answer" in the radio group. Then checks if the correct one is selected.
Here is the complete code:
<html>
<head>
<title>International Business</title>
<style type="text/css">
.myIndent{
margin-left: 2em;}
</style>
<script type="text/javascript">
function submitQuestion() {
var response = document.getElementsByName('answer');
for (var i = 0; i < response.length; i++) {
if (response[i].checked) {
response = response[i].value;
}
}
if (response == 'C') {
location = "correct.html";
}
else {
location = "wrong.html";
}
return false;
}
</script>
</head>
<body>
<form>
<p>31.) As long as international businesses _________, Islamic countries are likely to be receptive to those businesses.</p>
<div class="myIndent">
<label>A.)<input type="radio" name="answer" id="answerA" value="A" />employ Muslim people</label><br />
<label>B.)<input type="radio" name="answer" id="answerB" value="B" />have property in an Islamic nation</label><br />
<label>C.)<input type="radio" name="answer" id="answerC" value="C" />behave in a manner that is consistent with Islamic ethics</label><br />
<label>D.)<input type="radio" name="answer" id="answerD" value="D" />adhere to Islamic beliefs</label><br />
</div>
<br /><br />
<input type="submit" value="Submit" onclick="return submitQuestion()">
<input type="reset" value="Cancel">
</form>
</body>
</html>
solution3
0 2014-11-14 16:44:07
Use class instead of id
<div class="myIndent">
<labe>A.)<input type="radio" name="answer" class="answer" value="A">employ Muslim people</label><br />
<label>B.)<input type="radio" name="answer" class="answer" value="B">have property in an Islamic nation<label><br />
<label>C.)<input type="radio" name="answer" class="answer" value="C">behave in a manner that is consistent with Islamic ethics</label><br />
<label>D.)<input type="radio" name="answer" class="answer" value="D">adhere to Islamic beliefs</label><br />
</div>
However, you dont need to even give a class to all. Get checked radio button by name
var response = document.getElementsByName('answer').checked;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.