我正在使用API构建Trivia Webapp，我想向按钮添加事件监听器并提供正确答案，以便用户单击它时将显示一条消息，说明他们是对的，并且会收到一个新问题。代码如下所示：
function useApiData(triviaObj) {
let answers = sortArrayRandomly([
triviaObj.results[0].correct_answer,
triviaObj.results[0].incorrect_answers[0],
triviaObj.results[0].incorrect_answers[1],
triviaObj.results[0].incorrect_answers[2],
]);
document.querySelector("#category").innerHTML = `Category: ${triviaObj.results[0].category}`;
document.querySelector("#difficulty").innerHTML = `Difficulty: ${triviaObj.results[0].difficulty}`;
document.querySelector("#question").innerHTML = `Question: ${triviaObj.results[0].question}`;
document.querySelector("#answer1").innerHTML = `${answers[0]}`;
document.querySelector("#answer2").innerHTML = `${answers[1]}`;
document.querySelector("#answer3").innerHTML = `${answers[2]}`;
document.querySelector("#answer4").innerHTML = `${answers[3]}`;
let rightAnswer = triviaObj.results[0].correct_answer;
rightAnswer.addEventListener("click", correctAnswer);
console.log(answers);
}
function correctAnswer() {
alert("correct");
getTrivia();
}
它告诉我AddEventListener不是一个函数，我该如何解决？
使用循环填充答案元素。在该循环中，您可以检查当前答案是否为正确答案，并添加事件侦听器。
answers.forEach((answer, i) => {
let button = document.querySelector(`#answer${i+1}`);
button.innerHTML = answer;
if (answer == triviaObj.results[0].correct_answer) {
button.addEventListener("click", correctAnswer);
} else {
button.removeEventListener("click", correctAnswer);
}
});本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句