基于JavaScript和HTML的问答游戏计分系统实现问题求助

问题分析 #

你的代码存在几个关键问题导致计分功能失效：

1. 变量重复声明：先将score赋值为DOM元素，随后又重新声明为数值0，覆盖了DOM引用，无法操作页面计分元素。
2. 错误的页面写入方式：document.write(score)会直接替换页面内容，而非更新指定的计分区域。
3. 未同步分数到页面：答对题目后更新了分数变量，但没有将新值写入页面的计分元素。
4. 重启未重置分数：点击重启按钮时，分数没有重置为0，导致累计错误。

修复步骤 #

1. 区分计分变量和DOM元素：用不同变量名分别存储分数值和计分元素引用。
2. 移除document.write()，改为通过DOM元素的innerText更新显示。
3. 答对题目后，立即更新页面的计分显示。
4. 在startGame函数中添加分数重置逻辑。

修改后的完整代码 #

HTML

<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 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>
<div class="box">
  <div id="score">SCORE: 0</div>
</div>

CSS

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background-color: #4C8568
}

body.correct {
  color: green
}

body.wrong {
  background-color: red
}


.container {
  font-size: 20px;
  color: #B69E17;
  font-weight: bold;
  width: 800px;
  max-width: 80%;
  background-color: #5E6861;
  border-radius: 20px;
  padding: 10px;
  box-shadow: 0 0 10px 2px;
 
}

.box {
  width: 100px;
  border-radius: 20px;
  padding: 5px;
  color: black;
  background-color: white;
 
  
}

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

.btn {
  
  border: 1px solid hs1;
  background-color: #6C5F16;
  border-radius: 10px;
  padding: 5px 10px;
  color: white;
  font-weight: bold;
  font-size: 15px;
  outline: none;
}

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

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

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

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

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

.hide {
  display: none;
}

html {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: green;
}

.points {
  position: absolute;
  top: 15px;
  right: 15px;
  
}

.points {
  display: flex; 
  color: white;
  width: 250px;
  padding: 10px 0;
  font-size: 30px;
}

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 scoreElement = document.getElementById("score") // 单独存储计分元素引用

let score = 0; // 计分变量
let shuffledQuestions, currentQuestionIndex

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

function startGame() {
  startButton.classList.add('hide')
  shuffledQuestions = questions.sort(() => Math.random() - .5)
  currentQuestionIndex = 0
  score = 0; // 重启时重置分数
  scoreElement.innerText = `SCORE: ${score}` // 更新页面显示
  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 = 'Restart'
    startButton.classList.remove('hide')
  }
}

function setStatusClass(element, correct) {
  clearStatusClass(element)
  if (correct) {
    element.classList.add('correct')
    score += 10
    scoreElement.innerText = `SCORE: ${score}` // 答对后立即更新页面显示
  } else {
    element.classList.add('wrong')
  }
}

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

const questions = [
  {
    question: 'What is 2 + 2?',
    answers: [
      { text: '4', correct: true },
      { text: '22', correct: false }
    ]
  },
  {
    question: 'Who is the best YouTuber?',
    answers: [
      { text: 'Web Dev Simplified', correct: true },
      { text: 'Traversy Media', correct: true },
      { text: 'Dev Ed', correct: true },
      { text: 'Fun Fun Function', correct: true }
    ]
  },
  {
    question: 'Is web development fun?',
    answers: [
      { text: 'Kinda', correct: false },
      { text: 'YES!!!', correct: true },
      { text: 'Um no', correct: false },
      { text: 'IDK', correct: false }
    ]
  },
  {
    question: 'What is 4 * 2?',
    answers: [
      { text: '6', correct: false },
      { text: '8', correct: true }
    ]
  }
]

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