Question

所以我正在创建一个简单的1个问题多项选择测验，并根据提交的答案，我希望它将用户重定向到相应的页面。但是，我的问题是，即使我提交了正确答案，无论我提交什么输入，我都会指向同一页面。有人可以扫描我的代码，看看是否有一个我遗漏的轻微语法错误。

代码：

<!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>

修改：即使我将行if(response=='C')更改为if(response=="C")，我仍然遇到同样的问题

Answer 1

您只能拥有1个ID。 document.getElementById('answer');将获得它的第一个元素。

建议

除非你的学生上小学，否则我不能建议你写这样的测验;除非是更多的练习来学习正确的答案。如果根据反刍进行评分，则有太多方法可以让某人在答案时发生，而无需阅读问题。

See Fiddle

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;
}

修复了HTML语法：

<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>

多一点CSS：

.myIndent {
    margin-left: 2em;
    margin-bottom: 2em;
}
.myIndent label {
    display:block;
}

Answer 2

在标签A。）上，<labe>应为<label>

在标签B上。）您没有结束</label>标签

您不能拥有多个具有相同ID“answer”的元素

尝试这样的事情：

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;
}

此函数获取广播组中名称为“answer”的所有元素。然后检查是否选择了正确的。

以下是完整的代码：

<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>

Answer 3

使用class而不是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>

然而，你甚至不需要给所有人上课。按名称获取选中的单选按钮

var response = document.getElementsByName('answer').checked;

Javascript重定向到错误的页面

3 个答案:

建议

修复了HTML语法：

多一点CSS：