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並比較正確的問題和答案。