Javascript-如何将事件侦听器中的元素值与数组元素进行比较？

Question

再一次，我需要您提供有关我现在遇到的问题的意见。
我正在创建一个遇到逻辑问题的MCQ琐事。

尽管在此示例中，我故意将答案设置为B，C或D，但结果div将始终显示结果正确–尽管我仅在按钮A上设置了事件监听器，但未设置答案。

根据下面的代码，我是否可以正确比较元素值和数组答案值？

 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

您当前代码的问题是opt1.value === exam.answer 。 这两个属性均未undefined 。 opt1.value是因为未设置（我相信您需要opt1.textContent ），而exam.answer是因为exam是一个数组。 你会正确的！ 总是因为undefined === undefined为true

您可以通过返回当前显示的问题并将其用于比较来解决您的问题。

 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

这是带有更正代码的jsfiddle链接。

您必须遍历exam并比较正确的问题和答案。