为啥我的代码不会在测验结束时显示分数？

Posted

技术标签:

【中文标题】为啥我的代码不会在测验结束时显示分数？【英文标题】：Why won't my code display the score at the end of the quiz?为什么我的代码不会在测验结束时显示分数？ 【发布时间】：2021-11-14 19:52:39 【问题描述】：

我目前正在为我的学校项目构建一个问答游戏。题目显示出来，你必须点击你认为正确的答案，正确的答案会显示为绿色，错误的答案会显示为红色。完成第一个随机问题后，将有一个下一个按钮，您必须单击该按钮才能继续下一个问题，一旦完成所有 5 个问题，就会有一个提交按钮。点击提交按钮后应该会显示分数，但是分数没有显示。

这是 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");


let shuffledQuestions, currentQuestionIndex
let score = 0;
document.write(score);

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.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')
  
  if (answer.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
      
    ]
  
]



  //This is the bit where the score should have been displayed    document.getElementById("after_submit").style.visibility="visible";
  document.getElementById("score").innerhtml = "you got " + score + " correct.";

//This is the 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;


#after_Submit 
visibility: hidden;

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

【问题讨论】：

目前您的脚本正在尝试获取您的问号中不存在的 HTML 元素。 您在页面上缺少score 元素 这里不知道答案：if (answer.correct) score++ 【参考方案1】：

我添加了一些快速修复，试试吧。

const startButton = document.getElementById('start-btn')
const nextButton = document.getElementById('next-btn')
const submitButton = document.getElementById('submit')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
const answerButtonsElement = document.getElementById('answer-buttons')
const scoreText = document.getElementById("score");


let shuffledQuestions, currentQuestionIndex
let score = 0;


startButton.addEventListener('click', startGame)
nextButton.addEventListener('click', () => 
  currentQuestionIndex++
  setNextQuestion()
)
submitButton.addEventListener('click', showScore)

let executed = false;
function startGame() 
  if (!executed) 
    startButton.classList.add('hide')
    shuffledQuestions = questions.sort(() => Math.random() - .5)
    currentQuestionIndex = 0
    questionContainerElement.classList.remove('hide')
    setNextQuestion()

    executed = true;
  



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', function(e)
        selectAnswer(e, answer);
    , false);

    if (currentQuestionIndex  < shuffledQuestions.length + 1) 
        answerButtonsElement.appendChild(button)
    
    
  )


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


function selectAnswer(e, answer) 
  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 (answer.correct) 
    score++;
  
  
  if (shuffledQuestions.length > currentQuestionIndex + 1) 
    nextButton.classList.remove('hide')
   else 
    submitButton.classList.remove('hide')
  



function showScore () 
    document.getElementById("score").innerHTML = "you got " + score + " correct.";


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
      
    ]
  
]
*, *::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;


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;


#after_Submit 
visibility: hidden;

<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 class="controls">
      <button id="start-btn" class="start-btn btn">Start</button>
      <button id="next-btn" class="next-btn btn hide">Next</button>
      <button id="submit" class="btn hide">Submit</button>
    </div>
    
    <div id="score"></div>
    
  </div>

</html>

【讨论】：

建议：button.addEventListener('click',selectAnswer); 或 answerButtonsElement.addEventListener('click',function(e)selectAnswer(e))（首选）

以上是关于为啥我的代码不会在测验结束时显示分数？的主要内容，如果未能解决你的问题，请参考以下文章

Ionic 3 在添加平台时显示错误 400

运行代码时显示进度对话框的问题

CSS 位置帮助（动画内容结束时显示的水平侧边栏）

Julia 中的 PyPlot 仅在代码结束时显示绘图

日期选择器不会在laravel中单击时显示日历

为啥在 Edge 中调试我的 asp.net core 2.0 应用程序时显示“您需要一个新应用程序才能打开此本地主机”弹出窗口？