為什么選擇正確答案后我的分數沒有增加？

Question

每次選擇正確答案“A”時，我試圖調用 increaseScore() function 將分數增加 1。 現在，當您點擊開始按鈕時，它會增加 1，但這是唯一一次改變。 Nothing else happens when the correct or incorrect answer is chosen. 我不確定 increaseScore() function 是否寫得不正確，或者它只是在錯誤的地方。 如此迷失

const startButton = document.getElementById('startBtn')
const nextButton = document.getElementById('nextBtn')
const questionContainerElement = document.getElementById('questionContainer')
const questionElement = document.getElementById('question')
const answerButtonsElement = document.getElementById('answerButtons')

let shuffledQuestions, currentQuestionIndex

startButton.addEventListener('click', startGame)
nextButton.addEventListener('click', () => {
    currentQuestionIndex++
    setNextQuestion()
    
})


function startGame() {
    console.log('Started')
    startButton.classList.add('hide')
    shuffledQuestions = questions.sort(() => Math.random() - .5)
    currentQuestionIndex = 0
    questionContainerElement.classList.remove('hide')
    setNextQuestion()
    
}

function setNextQuestion() {
    resetState()
    showQuestion(shuffledQuestions[currentQuestionIndex])
   
}

function showQuestion(question) {
    questionElement.innerText = question.question
    question.answers.forEach(answer => {
        const button = document.createElement('button')
        button.innerText = answer.text
        button.classList.add('btn')
        if (answer.correct) { 
            button.dataset.correct = answer.correct
            increaseScore()
        }
        button.addEventListener('click', selectAnswer)
        answerButtonsElement.appendChild(button)
    })
}

function resetState() {
    clearStatusClass(document.body)
    nextButton.classList.add('hide')
    while (answerButtonsElement.firstChild) {
        answerButtonsElement.removeChild
        (answerButtonsElement.firstChild)
        
    }
}

function selectAnswer(e) {
    const selectedButton = e.target
    const correct = selectedButton.dataset.correct
    setStatusClass(document.body,correct)
    Array.from(answerButtonsElement.children).forEach(button => {
        setStatusClass(button, button.dataset.correct)
       
    })
    if (shuffledQuestions.length > currentQuestionIndex + 1){
        nextButton.classList.remove('hide')
    } else {
        startButton.innerText = 'Restart'
        startButton.classList.remove('hide')
    }
}

function setStatusClass(element, correct) {
    if (correct) {
        element.classList.add('correct')
        
    }else {
        element.classList.add('wrong')
    }
}
function increaseScore(){
    console.log('score increase', score)
    return displayScore.innerHTML = score + 1
    
}



function clearStatusClass(element) {
    element.classList.remove('correct')
    element.classList.remove('wrong')
}

const questions = [
    {
        question: "What is question #1",
        answers: [
            { text: 'A', correct: true},
            { text: 'B', correct: false},
            { text: 'C', correct: false},
            { text: 'D', correct: false}
        ]
    },
    {
        question: "What is question #2",
        answers: [
            { text: 'A', correct: true},
            { text: 'B', correct: false},
            { text: 'C', correct: false},
            { text: 'D', correct: false}
        ]
    },
    {
        question: "What is question #3",
        answers: [
            { text: 'A', correct: true},
            { text: 'B', correct: false},
            { text: 'C', correct: false},
            { text: 'D', correct: false}
        ]
    },
    {
        question: "What is question #4",
        answers: [
            { text: 'A', correct: true},
            { text: 'B', correct: false},
            { text: 'C', correct: false},
            { text: 'D', correct: false}
        ]
    },
    {
        question: "What is question #5",
        answers: [
            { text: 'A', correct: true},
            { text: 'B', correct: false},
            { text: 'C', correct: false},
            { text: 'D', correct: false}
        ]
    }

]
var score = 0;
var displayScore = document.querySelector('.score')
displayScore.innerHTML = score  

Answer 1

我相信這是因為您需要增加 score 的值，而不僅僅是設置 displayScore.innerHTML = score + 1。考慮

function increaseScore(){
  score = score + 1
  displayScore.innerHTML = score
}

Answer 2

您正在調用 increaseScore()，它返回分數，但您沒有將其保存在任何地方。

你有

increaseScore()

應該：

score = increaseScore();

Answer 3

一點點偵探工作很快就會發現罪魁禍首是displayScore.innerHTML = score + 1

你沒有進步分數，如果你想進步分數，只顯示 0 + 1 你的代碼應該是：

return displayScore.innerHTML = score++