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

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> 

Answer 2

Here is the jsfiddle link with the corrected code.

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