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。这两个属性都是未定义。 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>