Javascript - How to compare the element value inside event listener to the the array element?

Question

Once again, I need your input on the problem that I am having now.
I am creating a MCQ trivia where I encounter a logic problem.

Although for this example, I purposely set the answer are B, C or D, the result div will always show the result is correct – although I only set an event listener on button A but no answer.

Based on my code below, am I comparing the element value with the array answer value the right way?

var exam=[{
  "question": "Q1?",
  "option": ["A","B","C","D"],
  "answer": "B"
},{
  "question": "Q2?",
  "option": ["A","B","C","D"],
  "answer": "C"
},{
  "question": "Q3?",
  "option": ["A","B","C","D"],
  "answer": "D"
},{
  "question": "Q4?",
  "option": ["A","B","C","D"],
  "answer": "B"
},{
  "question": "Q5?",
  "option": ["A","B","C","D"],
  "answer": "C"
}]

//dom selector
var container = document.getElementById('container');
var questionEl = document.getElementById('question');
//for the answer display
var opt1 = document.getElementById('opt1');
var opt2 = document.getElementById('opt2');
var opt3 = document.getElementById('opt3');
var opt4 = document.getElementById('opt4');
//for the input button click
var opta = document.getElementById('opta');
var optb = document.getElementById('optb');
var optc = document.getElementById('optc');
var optd = document.getElementById('optd');
//
var button = document.querySelectorAll('button');
var nextButton = document.getElementById('help1Button');
var resultCont = document.getElementById('result');
//display question and answer
function displayQues() {
  //select one question randomly from the quiz array
  var i = Math.floor(Math.random() * exam.length);
  questionEl.textContent=exam[i].question;
  opt1.textContent = exam[i].option[0];
  opt2.textContent = exam[i].option[1];
  opt3.textContent = exam[i].option[2];
  opt4.textContent = exam[i].option[3];
};
//load this when page load
displayQues();
opta.addEventListener("click", function() {
  if (opt1.value === exam.answer) {
    displayQues();
    resultCont.textContent = "Correct!";	
  } else {
    resultCont.textContent = "Incorrect!";	
  }
});

<div id="container">
  <div class="title"> Alan Koh Exam Question</div>
    <div id="question"> </div>
    <button id="opta"> A: <span id="opt1"></span>  </button>
    <button id="optb"> B: <span id="opt2"></span>  </button>
    <button id="optc"> C: <span id="opt3"></span>  </button>
    <button id="optd"> D: <span id="opt4"></span>  </button>
    <div id="result"></div>

Answer 1

Here is the jsfiddle link with the corrected code.

You have to loop through exam and compare the correct question and answer.

Answer 2

The problem with your current code is opt1.value === exam.answer. Both these properties are undefined. opt1.value because it's not set (I believe you want opt1.textContent) and exam.answer because exam is an array. You get Correct! always since undefined === undefined is true

Your issue can be solved by returning the current displayed question and using it for comparison.

var exam = [{
  "question": "Q1?",
  "option": ["A", "B", "C", "D"],
  "answer": "B"
}, {
  "question": "Q2?",
  "option": ["A", "B", "C", "D"],
  "answer": "C"
}, {
  "question": "Q3?",
  "option": ["A", "B", "C", "D"],
  "answer": "D"
}, {
  "question": "Q4?",
  "option": ["A", "B", "C", "D"],
  "answer": "B"
}, {
  "question": "Q5?",
  "option": ["A", "B", "C", "D"],
  "answer": "C"
}]
//

//dom selector
var container = document.getElementById('container');
var questionEl = document.getElementById('question');
//for the answer display
var opt1 = document.getElementById('opt1');
var opt2 = document.getElementById('opt2');
var opt3 = document.getElementById('opt3');
var opt4 = document.getElementById('opt4');
//for the input button click
var opta = document.getElementById('opta');
var optb = document.getElementById('optb');
var optc = document.getElementById('optc');
var optd = document.getElementById('optd');
//
var button = document.querySelectorAll('button');
//

var nextButton = document.getElementById('help1Button');
var resultCont = document.getElementById('result');

//display question and answer
function displayQues() {

  //select one question randomly from the quiz array
  var i = Math.floor(Math.random() * exam.length);

  questionEl.textContent = exam[i].question;
  opt1.textContent = exam[i].option[0];
  opt2.textContent = exam[i].option[1];
  opt3.textContent = exam[i].option[2];
  opt4.textContent = exam[i].option[3];
  return exam[i]; // Return the chosen exam variable
};

//load this when page load
var currentExam = displayQues(); // Store the chosen exam

opta.addEventListener("click", function() {
  if (opt1.textContent === currentExam.answer) {
    currentExam = displayQues(); // Store the new question
    resultCont.textContent = "Correct!";
  } else {
    resultCont.textContent = "Incorrect!";
  }

});

<div id="container">
  <div class="title"> Alan Koh Exam Question</div>
  <div id="question"> </div>
  <button id="opta"> A: <span id="opt1"></span>  </button>
  <button id="optb"> B: <span id="opt2"></span>  </button>
  <button id="optc"> C: <span id="opt3"></span>  </button>
  <button id="optd"> D: <span id="opt4"></span>  </button>
  <div id="result"></div>