如何通过单击 JavaScript 中的按钮来启动测验？

Question

我已经构建了一个测验应用程序。我希望用户能够单击播放按钮，并在用户完成第一轮后从问题 1 重新开始测验。现在，如果用户开始回答问题，在最后一个问题之后会出现播放按钮供用户单击并继续播放。现在的问题是当点击播放时，第 40 行出现错误，说无法读取未定义。

var questionElement = document.getElementById('questions');
    var answerElement = document.getElementById('answers');
    var scoreBoard = document.querySelector('#score-board');
    const playBtn = document.querySelector('#play-btn');
    const playScore = document.querySelector('#play-score');
    const state = {
    currentQuestionIndex: 0,
    score: 0
 };

var questions = [
{ question: " 1. javaScript is an....... language?",
    answers: [ "object-oriented", "object-based", "procedural", "none of the above"],
    correct: 1
    
},
{ question: " 2.which of the following keywords is used a define variable in javaScript",
    answers: [ "var", "let", "both A and B", "none of the above"],
    correct: 2

  
}, 
{
    question: "3. which of the following methods is used to HTML elements using javaScript",
    answers: ["getElementsById", "getElementByClassName", "both A and B", "none of the above"] ,
    correct: 2
    
}
];


function showQuestion(questionIndex){
    const question = questions[questionIndex];
    const qDiv = document.createElement('div');
    const p = document.createElement('p');
    
    questionElement.innerHTML = "";
    answerElement.innerHTML = "";

    p.textContent = question.question;
    qDiv.appendChild(p);
    questionElement.appendChild(qDiv);
    
    
    question.answers.forEach((answers, answerIndex) =>{
        const $input = document.createElement('input');
        const $label = document.createElement('label');
        $label.appendChild($input);
        
        $label.appendChild(document.createTextNode(answers));
        $input.name = `question${questionIndex}`;
        $input.type = 'radio';
        $input.value = answerIndex;
        answerElement.append($label);
    });
    
};


var nBtn = document.querySelector('.nbtn');
nBtn.addEventListener('click', nextQuestion);

const $answers = document.getElementById("answers");
$answers.addEventListener("change", (event) => {
  const currentQuestion = questions[state.currentQuestionIndex];
  const selectedAnswerIndex = Number(event.target.value);
  const correctAnswerIndex = currentQuestion.correct;
  const isCorrect = selectedAnswerIndex === correctAnswerIndex;
  state.score += isCorrect ? 1 : 0;
});
showQuestion(0);

function nextQuestion() {
state.currentQuestionIndex += 1;
        if (state.currentQuestionIndex === questions.length) {
             removeLastQuestion();
             hidePlayBtn();
             //scorePage();
             showScores();
             showPlayBtn();
    } else{
        
        showQuestion(state.currentQuestionIndex)
    }   
};


function showScores() {
    if (state.currentQuestionIndex === questions.length) {
        scoreBoard.innerHTML = `${state.score}/${questions.length}`
    }   
}

function removeLastQuestion(){
         if (state.currentQuestionIndex > questions.length - 1) {
             questionElement.innerHTML = "";
             answerElement.innerHTML = "";
     }  
}

function scorePage() {
    if (state.currentQuestionIndex > questions.length -1) {
        window.location.href = 'index23.html';
     
    }

}

const score = document.querySelector('#play-score');
score.addEventListener('click', ()=>{
scoreBoard.innerText = `${state.score}/${questions.length}`;
        
});
const hidePlayBtn = function() {
nBtn.style.display = 'none';
playScore.style.display = 'none';

}


const init = function() {
    // showQuestion(0);

}

const showPlayBtn = function() {
    playBtn.style.display = 'block';
}

window.onload = function() {
    showQuestion(0);
    playBtn.style.display = 'none';
    playScore.style.display = 'none';
}

playBtn.addEventListener('click', ()=>{
    showQuestion(state.currentQuestionIndex);

    // nextQuestion();
    // showQuestion(state.currentQuestionIndex)
    // init();
    // nBtn.style.display = 'block';

});

Answer 1

您应该将

state

设置为变量，而不是常量

然后在

showPlayBtn

函数中，将

state.currentQuestionIndex

重置为0

希望对您有所帮助