無法獲取頁面上單選按鈕的值或索引。 [使用Javascript]

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自動檢查單選按鈕

你需要類似的東西

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;