[英]Can't add an event listener to an element from an API
我正在使用 API 構建一個瑣事網絡應用程序,我想向按鈕添加一個事件偵聽器並提供正確的答案,這樣當用戶單擊它時,它會顯示一條消息,說他們是對的,它會得到一個新問題。 代碼如下所示:
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 不是 function,我該如何解決這個問題?
事件偵聽器 go 在 DOM 元素上,而不是在數據片段或其他變量上。 嘗試找到正確的答案元素並將事件偵聽器附加到該元素:
const rightAnswer = triviaObj.results[0].correct_answer;
const matchingAnswer = answers.find((x) => x === rightAnswer);
const rightElement = Array.from(document.querySelectorAll('*[id^="answer"]'))
.find((el) => el.innerText.includes(rightAnswer))
rightElement.addEventListener("click", correctAnswer);
使用循環填充答案元素。 在該循環中,您可以檢查當前答案是否為正確答案並添加事件偵聽器。
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); } });
假設triviaObj.results[0].correct_answer
是一個代表正確答案的數字,那么:
代替
let rightAnswer = triviaObj.results[0].correct_answer;
和
let rightAnswer = document.querySelector(`#answer${triviaObj.results[0].correct_answer}`);
這比贊怒的解決方案簡單多了。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.