Question

我正在为个性测试写一个表格。该页面存在用户需要为每个选择答案的问题。该页面不允许用户跳过问题，它会提醒他们回答遗漏的问题。提交表单后，页面将显示分数。

我试图使用for循环将单选按钮的值存储在数组中。它不起作用。

以下是HTML代码：

<!-- Form -->
<form name="quiz" onsubmit="return show()">

    <!-- Question 1 -->
    <p>Question 1</p>
    <input type="radio" name="q0" value="a"> a
    <br>
    <input type="radio" name="q0" value="b"> b
    <br>
    <input type="radio" name="q0" value="c"> c

    <!-- Question 2 -->

    <!-- Question 3 -->

    <!-- Question 4 -->

    <!-- Question 5 -->
    <p>Question 5</p>
    <input type="radio" name="q4" value="a"> a
    <br>
    <input type="radio" name="q4" value="b"> b
    <br>
    <input type="radio" name="q4" value="c"> c

    <!-- Submit Button -->
    <input type="submit" value="Show Result">

</form>

这是我的JavaScript代码：

function show() {

    var questions = 5;
    var score = 0;
    var solution = ["a", "c", "a", "b", "b"];
    var answers = [];

    for (i = 0; i < questions; i++) {

        answers[i] = document.quiz.eval('q' + i).value;

        if (answers[i] == null || answers[i] == '') {
            window.alert("You need to answer question " + (i + 1));
            return false;
        }

        if (solution[i] == answers[i]) {
            score++;
        }

    }
    window.alert(score);
}

Answer 1

您需要的是验证功能。

// Since you mentionned
// "I'm trying to store the values of radio buttons in an array"
var answers = [];

var show = (function(answers) {
    // evaluate this once and avoid globals
    var questions = 5,
        solution = ["a", "c", "a", "b", "b"],
        form = document.quiz;

    // and return a validate function
    return function() {

        var score = 0,
            success = solution.every(function(value, i) {

                // get the value of the form field, notice the brackets
                var current = answers[i] = form['q' + i].value;
                if (current === value) {
                    score++;
                } else if (current == null || current == '') {
                    alert("You need to answer question " + (i + 1));
                    return false;
                }
                return true;
            });
        if (success) alert("Score: " + score);
        return success;
    };

})(answers);

重要的部分是document.quiz['q' + i]。请参阅Get Radio Button Value with Javascript。

Answer 2

eval是window对象的属性，而不是表单，但事实上您实际上并不需要使用它。

解决方案1 。取代

answers[i] = document.quiz.eval('q'+i).value;

带

var tmp = 'q'+i;
answers[i] = document.quiz[tmp].value;

解决方案2 。取代

 answers[i] = document.quiz.eval('q'+i).value;

与

 document.quiz['q'+i].value;

注意：即使你可以像你想要的那样使用eval（使用原型），它仍然会出错，因为在这一行

 answers[i] = document.quiz.eval('q'+i).value;

假设i=0 eval会尝试评估q0（将其视为命名变量）并且您的全局范围内没有任何具有该名称的变量

Answer 3

您需要遍历每个广播组的每个单选按钮选项，以查找已检查的输入并获取其值。目前你正在循环每个小组。

在for循环的开头添加：

var radioButtons = document.getElementsByName("q"+i);
for (var x = 0; x < radioButtons.length; x ++) {
  if (radioButtons[x].checked) {
   answers[i] = radioButtons[x].value;
 }
}

如何在JavaScript中通过for循环选择单选按钮值？

3 个答案: