JS测验Web应用答案选项及功能按钮不显示问题排查

所有渲染异常均来自script.js的语法错误、拼写错误、逻辑缩进错误、缺失绑定，HTML和CSS文件无核心问题，具体错误点：

• 变量名拼写混乱：DOM元素获取时定义的是answerButtonElement，后续调用全写为answerButtonsElement（多1个s）；selectAnswer函数里selectedButton、button也存在拼写错（少写d、拼成botton），直接触发JS引用错误，代码执行中断，后续按钮显示逻辑完全不运行
• 逻辑缩进错误：showQuestion函数中，错误选项的按钮创建、DOM插入逻辑全被写在if (answer.correct)判断块内，非正确答案根本不会被渲染；同时所有错误选项按钮未绑定点击事件
• 语法错误：selectAnswer函数中变量赋值和函数调用被连写为一行const correct = selectedButton.dataset.correctsetStatusClass(document.body, correct)，缺少断句触发语法错误；resetState函数中removeChild方法因括号换行未被正确调用，旧答案按钮无法清空
• 缺失核心逻辑：未给Next按钮绑定点击事件、渲染新题前未调用重置方法清空上一题状态，导致切题失效、旧内容残留
• 小逻辑缺陷：直接用Array.sort做随机排序存在概率偏差，未对原题目数组做浅拷贝会污染原数据

直接替换原有script.js内容为以下修复完成的代码即可，HTML、CSS无需修改：

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")

let shuffledQuestions, currentQuestionIndex

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

function startGame() {
  startButton.classList.add("hide")
  // 修正随机排序逻辑，避免污染原题目数组
  shuffledQuestions = [...questions].sort(() => Math.random() - 0.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")
    button.dataset.correct = answer.correct
    // 所有选项按钮统一绑定点击事件
    button.addEventListener("click", selectAnswer)
    answerButtonsElement.appendChild(button)
  })
}


function resetState() {
  clearStatusClass(document.body)
  nextButton.classList.add("hide")
  // 清空所有旧选项（含HTML中预写的占位按钮）
  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) {
  clearStatusClass(element)
  element.classList.add(correct ? "correct" : "wrong")
}

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

const questions = [
  {
    question: 'What language do they speak in Zimbabwe?',
    answers: [
      { text: 'Shona', correct: true },
      { text: 'Spanish', correct: false }
    ]
  },
  {
    question: 'Who is the President of Russia?',
    answers: [
      { text: 'Juju', correct: false },
      { text: 'Putin', correct: true },
      { text: 'Hitler', correct: false },
      { text: 'Clint', correct: false }
    ]
  },
  {
    question: 'What are the colours of the Jamaican flag?',
    answers: [
      { text: 'Pink and White', correct: false },
      { text: 'Green, yellow, white and black', correct: true },
      { text: 'White, yellow and gold', correct: false },
      { text: 'Red', correct: false }
    ]
  },
  {
    question: 'What is the Capital City of Germany ?',
    answers: [
      { text: 'Belgium', correct: false },
      { text: 'Berlin', correct: true }
    ]
  },
  {
    question: 'In which city is the Statue of Liberty?',
    answers: [
      { text: 'Soweto', correct: false },
      { text: 'New York City', correct: true }
    ]
  },
  {
    question: 'Which country has a unicorn as its national animal?',
    answers: [
      { text: 'Finland', correct: false },
      { text: 'Scotland', correct: true },
      { text: 'Fairytopia', correct: false },
      { text: 'Narnia', correct: false }
    ]
  },
  {
    question: 'Where is Nollywood?',
    answers: [
      { text: 'Nairobi', correct: false },
      { text: 'Nigeria', correct: true },
      { text: 'Namibia', correct: false },
      { text: 'Nashville', correct: false }
    ]
  },
  {
    question: 'Which country is home to the tallest building?',
    answers: [
      { text: 'Singapore', correct: false },
      { text: 'UAE', correct: true },
      { text: 'China', correct: false },
      { text: 'France', correct: false }
    ]
  },
  {
    question: 'Which is the largest country in the world?',
    answers: [
      { text: 'China', correct: false },
      { text: 'Russia', correct: true },
      { text: 'Mexico', correct: false },
      { text: 'Nigeria', correct: false }
    ]
  },
  {
    question: 'Who is the President of South Korea?',
    answers: [
      { text: 'Son Heung-Min', correct: false },
      { text: 'Yoon Soek-Youl', correct: true },
      { text: 'Kim Nam-Joon', correct: false },
      { text: 'Kim Bok-Joo', correct: false }
    ]
  }
]

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