为什么我的JS问答小游戏答题结束后无法正常显示得分？

问题修复方案 #

存在的问题

• 计分逻辑错误：selectAnswer函数中判断答案正确的代码使用了未定义的answer变量，导致分数无法正常累加
• 缺少得分渲染DOM：HTML中没有对应score、after_submit的元素，得分没有展示载体
• 得分更新时机错误：当前得分更新代码写在全局作用域，仅页面加载时执行一次，点击提交按钮时不会触发更新
• 命名大小写不匹配：CSS中定义的ID是#after_Submit（大写S），JS中调用的是after_submit（小写s），样式无法生效
• 提交按钮无对应逻辑：所有题目完成后start按钮变为提交按钮，但点击仍触发原开始游戏逻辑，没有处理得分展示

修复后的代码

1. HTML代码

<html lang="en">
<title>Quiz App</title>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="styles.css" rel="stylesheet">
  <script defer src="script.js"></script>
</head>

  <div class="container">
    <div id="question-container" class="hide">
      <div id="question">Question</div>
      <div id="answer-buttons" class="btn-grid">
        <button class="btn">Answer 1</button>
        <button class="btn">Answer 2</button>
        <button class="btn">Answer 3</button>
        <button class="btn">Answer 4</button>
      </div>
    </div>
    <!-- 新增得分展示容器 -->
    <div id="after_submit" class="hide">
      <p id="score"></p>
    </div>
    <div class="controls">
      <button id="start-btn" class="start-btn btn">Start</button>
      <button id="next-btn" class="next-btn btn hide">Next</button>
    </div>
  </div>

</html>

2. CSS代码

*, *::before, *::after {
  box-sizing: border-box;
  font-family: Gotham Rounded;
}

:root {
  --hue-neutral: 200;
  --hue-wrong: 0;
  --hue-correct: 145;
}

body {
  --hue: var(--hue-neutral);
  padding: 0;
  margin: 0;
  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background-color: lime;
}

body.correct {
  --hue: var(--hue-correct);
}

body.wrong {
  --hue: var(--hue-wrong);
}

.container {
  width: 600px;
  max-width: 80%;
  background-color: green;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 0 10px 2px;
  color: white;
}

.btn-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 10px;
  margin: 20px 0;
}

.btn {
  --hue: var(--hue-neutral);
  border: 1px solid hsl(var(--hue), 100%, 30%);
  background-color: hsl(var(--hue), 100%, 50%);
  border-radius: 5px;
  padding: 5px 10px;
  color: white;
  outline: none;
}

.btn:hover {
  border-color: black;
}

.btn.correct {
  --hue: var(--hue-correct);
  color: white;
}

.btn.wrong {
  --hue: var(--hue-wrong);
}


.start-btn, .next-btn {
  font-size: 1.5rem;
  font-weight: bold;
  padding: 10px 20px;
}

.controls {
  display: flex;
  justify-content: center;
  align-items: center;
}

a {
text-decoration: solid;
color: white;
font-size: 300% 
}

div.a {
  position: absolute;
  top: 0;
  border: green;
}

.hide {
  display: none;
}
/* 统一ID命名为小写，和JS保持一致 */
#after_submit {
  text-align: center;
  font-size: 1.2rem;
  margin: 10px 0;
}

3. JavaScript代码

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')
const scoreText = document.getElementById("score");
const afterSubmit = document.getElementById("after_submit");


let shuffledQuestions, currentQuestionIndex
let score = 0;

// 修改start按钮点击逻辑，区分开始游戏和提交得分
startButton.addEventListener('click', () => {
  if(startButton.innerText === 'Submit'){
    // 提交后展示得分
    questionContainerElement.classList.add('hide')
    afterSubmit.classList.remove('hide')
    scoreText.innerHTML = "你答对了 " + score + " 道题。";
    startButton.innerText = '重新开始'
    return
  }
  if(startButton.innerText === '重新开始'){
    // 重置状态重新开始
    score = 0
    afterSubmit.classList.add('hide')
  }
  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.answers.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 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 = 'Submit'
    startButton.classList.remove('hide')
  }
  // 修复计分逻辑，用已定义的correct变量判断
  if (correct) {
    score++
  }
}

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

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

const questions = [{
    question: 'What is the capital city of Brazil?',
    answers: [{
        text: 'Brasilia',
        correct: true
      },
      {
        text: 'Rio de Janeiro',
        correct: false
      }
    ]
  },
  {
    question: 'What is the population of the United Kingdom in 2021?',
    answers: [{
        text: '68 million',
        correct: true
      },
      {
        text: '81 million',
        correct: false
      },
      {
        text: '56 million',
        correct: false
      },
      {
        text: '62 million',
        correct: false
      }
    ]
  },
  {
    question: 'What country has the most people as of 2021?',
    answers: [{
        text: 'India',
        correct: false
      },
      {
        text: 'Indonesia',
        correct: false
      },
      {
        text: 'China',
        correct: true
      },
      {
        text: 'USA',
        correct: false
      }
    ]
  },
  {
    question: 'Which city is bigger?',
    answers: [{
        text: 'Paris',
        correct: false
      },
      {
        text: 'London',
        correct: true
      }
    ]
  },
  {
    question: 'What country is angkor wat in?',
    answers: [{
        text: 'Laos',
        correct: false
      },
      {
        text: 'Cambodia',
        correct: true
      },
      {
        text: 'Vietnam',
        correct: false
      },
      {
        text: 'Thailand',
        correct: false
      }
    ]
  }
]

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