Question

我正在开发一个测验应用程序，但我似乎无法获得页面上单选按钮的值或索引。

这是我的代码：

HTML：

<div id="container">
    <div id="quiz"></div>
    <div id="choices"></div>
    <input id="next" type="button" value="Next">
    <input id="back" type="button" value ="Back">
    <div id="results"></div>
</div>

JavaScript的：

var allQuestions = [
    {
        question: "Who is the best in the world?",
        choices: ["CM Punk", "John Cena", "Daniel Bryan", "Roman Reigns"],
        correctAnswer: 0
    },

    {
        question: "Who is the current WWE World Champion?",
        choices: ["John Cena", "Brock Lesnar", "Triple H"],
        correctAnswer: 1
    },

    {
        question: "Where is Toronto located?",
        choices: ["Ontario", "California", "Georgia", "Texas"],
        correctAnswer: 0
    },

    {
        question: "What is the largest California city?",
        choices: ["Los Angeles", "San Fransico", "San Deigo", "Anahiem"],
        correctAnswer: 0
    }
];

var quiz = document.getElementById('quiz');
var choicesContainer = document.getElementById('choices');
var nextButton = document.getElementById('next');
var backButton = document.getElementById('back');
var score = 0;
var questionIndex = 0;        

// A function to show the question.

function showQuiz() {
    var currentQuestion = allQuestions[questionIndex].question;
    quiz.textContent = currentQuestion;

    choicesContainer.innerHTML = "";
    var choicesNum = allQuestions[questionIndex].choices.length;

    for (var i = 0; i < choicesNum; i++) {
        var choice = allQuestions[questionIndex].choices[i];
        choicesHTML = "<input type='radio' name='choice'>" + choice + "</br>";
        choicesContainer.innerHTML += choicesHTML;
    }    
}

function checkScore() {
    //var correctAnswers = allQuestions[questionIndex].correctAnswer;

    var radios = document.querySelectorAll('[type=radio]');
    var userAnswers;

    for (var i = 0; i < radios.length; i++) {
        if(radios[i].checked) {
            userAnswers = radios[i].value;
            console.log(userAnswers);
        }
    }
}

showQuiz();

nextButton.addEventListener('click', function(){
    questionIndex++;
    showQuiz();
    checkScore();
});

backButton.addEventListener('click', function(){
    questionIndex--;
    showQuiz();
});

首先，我认为这是因为我在DOM准备好之前调用了checkAnswers（）函数，但事实并非如此，所以我陷入困境。

任何帮助，都会很棒，非常感谢。谢谢！

Answer 1

您的逻辑错误。

当你在最后一个问题之后点击“下一步”时，

allQuestions [questionIndex]未定义。如果还有问题，你需要检查一下。

我认为单选按钮的选择器是错误的。看这个： javascript check radio buttons automatically

你需要像

这样的东西

radios = document.getElementsByTagName('INPUT');
    for (var i = 0; i < radios.length; i++) {
        if(radios[i].type == "radio"){
            if(radios[i].checked) {
                userAnswers = radios[i].value; 
            }
        }
    }

或者只选择带有

的已检查元素

checkedbutton = document.querySelector("input[name='choice']:checked");

并且：您应该将答案添加为按钮的“值”，例如

<input type="radio" name="choice" value="Ontario">

通过这种方式，您可以轻松获得价值

checkedbutton.value;

无法获取页面上单选按钮的值或索引。 [使用Javascript]

1 个答案: