JavaScript问答游戏：答案按钮、Next按钮故障及背景色无变化排查

问题清单 #

• Next按钮在主界面默认显示，仅需在答题界面展示
• 答案点击按钮无响应
• 答对或答错时页面背景色未变化

问题根源与修复方案 #

1. Next按钮初始显示问题 #

原因：页面加载时未给Next按钮添加隐藏类，导致主界面可见。
修复：初始化阶段给nextButton添加隐藏类：

const nextButton = document.getElementById('next-btn')
nextButton.classList.add('hide') // 新增该行代码

2. 答案按钮无响应问题 #

原因：

• 创建答案按钮时未绑定点击事件；
• resetState函数缺少闭合括号，导致selectAnswer函数被错误嵌套在resetState内部，无法正常触发；
• selectAnswer函数内错误尝试给未定义的button绑定事件。

修复：

• 补全resetState函数的闭合括号；
• 在showQuestion函数中创建按钮后立即绑定点击事件：

function showQuestion(question) {
    questionElement.innerText = question.question

    question.answer.forEach(answer => {
        const button = document.createElement('button')
        button.innerText = answer.text
        button.classList.add('btn')

        if (answer.correct) {
            button.dataset.correct = answer.correct
        }
        // 新增：绑定点击事件
        button.addEventListener('click', selectAnswer)
        answerButtonsElement.appendChild(button)
    });
}

// 补全resetState的闭合括号
function resetState() {
    clearStatusClass(document.body)
    while (answerButtonsElement.firstChild) {
        answerButtonsElement.removeChild(answerButtonsElement.firstChild)
    }
} // 新增该行闭合括号

• 删除selectAnswer函数内错误的button.addEventListener('click', selectAnswer)代码。

3. 背景色未变化问题 #

原因：缺少setStatus函数定义，未实现给页面body添加正确/错误状态类的逻辑。

修复：添加setStatus函数，同时修正selectAnswer中调用setStatus的目标元素（应为body而非answerButtonsElement）：

function setStatus(element, correct) {
    clearStatusClass(element)
    if (correct) {
        element.classList.add('correct')
    } else {
        element.classList.add('wrong')
    }
}

function selectAnswer(e) {
    const selectedButton = e.target
    const correct = selectedButton.dataset.correct
    // 修改目标为document.body
    setStatus(document.body, correct)

    if (shuffledQuestions.length > currentQuestionIndex + 1) {
        nextButton.classList.remove('hide')
    } else {
        startButton.innerText = 'Restart';
        startButton.classList.remove('hide')
    }
}

完整修复后的核心代码片段 #

/* Starting game */
const startButton = document.getElementById('start-btn')
const nextButton = document.getElementById('next-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
const answerButtonsElement = document.getElementById('answer-buttons')

// 初始化隐藏Next按钮
nextButton.classList.add('hide')

/* Shuffling question, so they will be presented in different orders each time */
let shuffledQuestions 
let currentQuestionIndex

/* Starting game, by pressing Start button */
startButton.addEventListener('click', startGame)
nextButton.addEventListener('click', () => {
    currentQuestionIndex++
    setNextQuestion()
})

function startGame(){
    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.answer.forEach(answer => {
        const button = document.createElement('button')
        button.innerText = answer.text
        button.classList.add('btn')

        if (answer.correct) {
            button.dataset.correct = answer.correct
        }
        button.addEventListener('click', selectAnswer)
        answerButtonsElement.appendChild(button)
    });
}

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

function resetState() {
    clearStatusClass(document.body)
    while (answerButtonsElement.firstChild){
        answerButtonsElement.removeChild(answerButtonsElement.firstChild)
    }
}

function setStatus(element, correct) {
    clearStatusClass(element)
    if (correct) {
        element.classList.add('correct')
    } else {
        element.classList.add('wrong')
    }
}

function selectAnswer(e) {
    const selectedButton = e.target
    const correct = selectedButton.dataset.correct
    setStatus(document.body, correct)

    if (shuffledQuestions.length > currentQuestionIndex + 1) {
        nextButton.classList.remove('hide')
    } else {
        startButton.innerText = 'Restart';
        startButton.classList.remove('hide')
    }
}

内容的提问来源于stack exchange，提问作者naszelezs