title: How to check if the users selection is the correct answer
body: <p>I am building a quiz app for practice in Javascript and have created all the questions.. I have made it go to the next question when the &quot;Next Question button&quot; is clicked, and have the correct answer console logging, but can't find out how to implement it to see if it matches the users input. If I can track it, I will add it to a &quot;currentScore counter&quot;</p>
  <p>CODE:</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>let question = document.querySelector('.question')
  let answerbox = document.querySelector('.answer-container')
  let quizbox = document.querySelector('.quiz-container')
  let answer1 = document.getElementById('a1')
  let answer2 = document.getElementById('a2')
  let answer3 = document.getElementById('a3')
  let answer4 = document.getElementById('a4')
  let answers = document.getElementsByClassName('answer')
  let submitBtn = document.getElementById('submit-btn')
  let currentquestion = 0
  let currentscore = 0
  
  const questionsData = [{
      question: "How old am I?",
      answers: {
        a: "18",
        b: "21",
        c: "25",
        d: "35",
      },
      correctAnswer: "b"
    },
    {
      question: "What is my favorite color?",
      answers: {
        a: "Purple",
        b: "Green",
        c: "Black",
        d: "Red",
      },
      correctAnswer: "c"
    },
    {
      question: "What is my middle name?",
      answers: {
        a: "Albert",
        b: "David",
        c: "Graham",
        d: "John",
      },
      correctAnswer: "d"
    },
  ]
  
  const loadquestion = () =&gt; {
    console.log('working!!!')
    //GETTING THE CORRECT ANSWER //
    let correctAnswer = (questionsData[currentquestion].correctAnswer)
    console.log(correctAnswer)
    //RESET CLICK WHEN CLICKED OUTSIDE
    const clickreset = (e) =&gt; {
      if (e.target !== quizbox) {
        // console.log(answer1.checked)
        answer1.checked = false
        answer2.checked = false
        answer3.checked = false
        answer4.checked = false
      } else {
      }
    }
    window.addEventListener('click', clickreset)
    // console.log(questionsData[currentquestion].answers)
    //INPUTTING THE QUESTIONS AND ANSWERS FROM THE QUIZDATE
    question.innerText = questionsData[currentquestion].question
    answer1.innerText = questionsData[currentquestion].answers.a
    answer2.innerText = questionsData[currentquestion].answers.b
    answer3.innerText = questionsData[currentquestion].answers.c
    answer4.innerText = questionsData[currentquestion].answers.d
    for (i = 0; i &lt; answers.length; i++) {
      let answerels = answers[i];
      //RESETTING THE SELECTED ANSWER WHEN THE USER MOVES ON TO THE NEXT QUESTION
      answerels.checked = false
    }
  
    currentquestion++
  }
  
  loadquestion()
  
  const endofquiz = () =&gt; {
    //GIVING RESULTS AT THE END
    question.innerText = 'You answered ___ out of ___'
    answer1.style.opacity = '0'
    answer2.style.opacity = '0'
    answer3.style.opacity = '0'
    answer4.style.opacity = '0'
    submitBtn.innerText = 'Restart Quiz'
    submitBtn.addEventListener('click', () =&gt; {
      location.reload()
    })
  }
  
  submitBtn.addEventListener('click', () =&gt; {
  
    //KEEP TRACK OF QUESTIONS UNTIL QUIZ IS FINISHED
    if (currentquestion &lt; questionsData.length) {
      for (i = 0; i &lt; answers.length; i++) {
        let answerels = answers[i];
        //CHECK TO SEE IF USER HAS SELECTED AN ANSWER
        if (answerels.checked == true) {
          //CHECK TO SEE IF USER HAS SELECTED AN ANSWER
          //MOVE ON TO NEXT QUESTION
          loadquestion()
          // console.log('checked!')
        } else {
          //STOP USER FROM GOING TO NEXT QUESTION WITHOUT SELECTING AN ANSWER
          // console.log('not checked! :(')
        }
      }
    } else {
      // SHOW RESULTS 
      endofquiz()
    }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  
   ::-webkit-scrollbar {
    display: none;
  }
  
  .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }
  
  .quiz-container {
    margin-top: 3em;
    height: 75vh;
    width: 50vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  }
  
  .question-container {
    height: 25vh;
    width: 80vh;
    /* position: absolute; */
    /* top: 10%;
          left: 50%; */
    /* transform: translate(-50%, -10%); */
    background-color: rgb(59, 0, 223);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  }
  
  .question {
    padding: 1em 1.5em;
    font-size: 1.8rem;
    text-align: center;
    color: white;
  }
  
  .answer-container {
    height: 25vh;
    width: 50vh;
    display: flex;
    margin-top: -5em;
    flex-direction: column;
  }
  
  label {
    background-color: white;
    padding: 0.5em;
    margin: 0.5em;
    position: relative;
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
    cursor: pointer;
    border: 2px solid rgb(59, 0, 223);
  }
  
  label:hover {
    background-color: rgb(59, 0, 223);
    color: white;
    cursor: pointer;
    transition: 0.45s ease;
  }
  
  input[type="radio"] {
    opacity: 0;
  }
  
  input:checked+label {
    background-color: rgb(59, 0, 223);
    color: white;
    cursor: pointer;
    transition: 0.45s ease;
  }
  
  .submit-btn {
    margin-top: 3em;
    background-color: white;
    outline: none;
    border: 2px solid rgb(59, 0, 223);
    padding: 0.5em 1.5em;
    font-weight: bold;
    font-size: 1.3rem;
    width: 10%;
  }
  
  .submit-btn:hover {
    color: white;
    background-color: rgb(59, 0, 223);
    transition: 0.45s ease;
    cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;link rel="stylesheet" href="styles.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="wrapper"&gt;
      &lt;div class="quiz-container" id="quiz-container"&gt;
        &lt;div class="question-container"&gt;
          &lt;h1 class="question"&gt;Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eveniet, inventore.&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="answer-container"&gt;
          &lt;input class="answer" id='an1' type="radio" name="a"&gt;&lt;/input&gt; &lt;label id="a1" for="an1"&gt;lorem&lt;/label&gt;
          &lt;input class="answer" id='an2' type="radio" name="a"&gt;&lt;/input&gt; &lt;label id="a2" for="an2"&gt;lorem&lt;/label&gt;
          &lt;input class="answer" id='an3' type="radio" name="a"&gt;&lt;/input&gt; &lt;label id="a3" for="an3"&gt;lorem&lt;/label&gt;
          &lt;input class="answer" id='an4' type="radio" name="a"&gt;&lt;/input&gt; &lt;label id="a4" for="an4"&gt;lorem&lt;/label&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;button class="submit-btn" id="submit-btn"&gt;Next Question&lt;/button&gt;
    &lt;/div&gt;
    &lt;script src="app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>