如何检查正确答案JavaScript(4个按钮)

Question

我正在使用JavaScript创建一个问答游戏，我想创建一个函数来检查答案是否正确

我的目标是检查在 4 个按钮中单击的按钮是否正确，需要为每个问题确定正确答案。

你能指导我该怎么做吗？

我有对象数组：

let myQuestions = [{
question: "How old is LJ?",
answers: {
a: "27",
b: "25",
c: "26",
d: "24",
correctAnswer: "b",
},
},
{
question: "What is her favorite game?",
answers: {
a: "ML",
b: "COD",
c: "DOTA 2",
d: "LOL",
correctAnswer: "b",
},
},
{
question: "Where does LJ live?",
answers: {
a: "Pasig city",
b: "Quezon city",
c: "Rizal",
d: "Sta Mesa",
correctAnswer: "a",
},
}
];
//Here's my JavaScript code function to render the question and the choices everytime we click the buttons. 

function renderQuestion() {
let show = document.getElementById('question');
let q = myQuestions[questionIndex];
show.innerHTML = q.question;
questionIndex++;
console.log(questionIndex)
button1.innerHTML = q.answers.a;
button2.innerHTML = q.answers.b;
button3.innerHTML = q.answers.c;
button4.innerHTML = q.answers.d;
}

Answer 1

试试这个

假设这个测验不重要(任何人都可以在源代码中看到答案(

我将正确答案移到了答案列表之外

let myQuestions = [{ question: "How old is LJ?", answers: { a: "27", b: "25", c: "26", d: "24", }, correctAnswer: "b", }, { question: "What is her favorite game?", answers: { a: "ML", b: "COD", c: "DOTA 2", d: "LOL", }, correctAnswer: "b", }, { question: "Where does LJ live?", answers: { a: "Pasig city", b: "Quezon city", c: "Rizal", d: "Sta Mesa", }, correctAnswer: "a", } ];
let questionIndex = 0;
function renderQuestion() {
if (questionIndex >= myQuestions.length) return;
let show = document.getElementById('question');
let q = myQuestions[questionIndex];
show.innerHTML = q.question;
Object.entries(q.answers).forEach(([letter,text]) => {
const but = document.getElementById(letter);
but.innerHTML = text
but.dataset.correct = q.correctAnswer === letter;
})
questionIndex++;
}
renderQuestion()
document.getElementById("buts").addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.type && tgt.type === "button") {
document.getElementById("result").innerText = tgt.dataset.correct === "true" ? "Correct" : "Incorrect"
}
})
document.getElementById("next").addEventListener("click", renderQuestion)

<span id="question"></span> <span id="result"></span>
<div id="buts">
<button type="button" id="a"></ button>
<button type="button" id="b"></ button>
<button type="button" id="c"></ button>
<button type="button" id="d"></ button>
</div>
<button type="button" id="next">Next</button>