title: Why won't my code display the score at the end of the quiz?
body: <p>I am currently building a quiz game for my school project. The question is displayed and you have to click on the answer that you think is correct, the correct answer will be displayed in green and the wrong answers in red. after you complete the first randomized question there will be a next button which you will have to click to move on to the next question, once you complete all 5 questions there is a submit button. After you click the submit button the score should be displayed, however the score is not displaying.</p>
  <p>This is the JavaScript:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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', () =&gt; {
    currentQuestionIndex++
    setNextQuestion()
  })
  
  function startGame() {
    startButton.classList.add('hide')
    shuffledQuestions = questions.sort(() =&gt; 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 =&gt; {
      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 =&gt; {
      setStatusClass(button, button.dataset.correct)
    })
    if (shuffledQuestions.length &gt; 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.";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>//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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="en"&gt;
  &lt;title&gt;Quiz App&lt;/title&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;link href="styles.css" rel="stylesheet"&gt;
    &lt;script defer src="script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
    &lt;div class="container"&gt;
      &lt;div id="question-container" class="hide"&gt;
        &lt;div id="question"&gt;Question&lt;/div&gt;
        &lt;div id="answer-buttons" class="btn-grid"&gt;
          &lt;button class="btn"&gt;Answer 1&lt;/button&gt;
          &lt;button class="btn"&gt;Answer 2&lt;/button&gt;
          &lt;button class="btn"&gt;Answer 3&lt;/button&gt;
          &lt;button class="btn"&gt;Answer 4&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="controls"&gt;
        &lt;button id="start-btn" class="start-btn btn"&gt;Start&lt;/button&gt;
        &lt;button id="next-btn" class="next-btn btn hide"&gt;Next&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>