Question

我正在使用 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 不是函数，我该如何解决？

Answer 1

事件监听器处理 DOM 元素，而不是数据片段或其他变量。尝试找到正确的答案元素并将事件侦听器附加到该元素：

import cv2
import numpy as np

image = cv2.imread(r"C:\Users\fazil\Desktop\12.png")
gray = cv2.cvtColor(image,cv2.COLOR_BGR2GRAY)
gray = cv2.Canny(gray,75,200)
gray = cv2.threshold(gray,127,255,cv2.THRESH_BINARY_INV)[1]
cv2.imshow("s",gray)
contours, hiearchy = cv2.findContours(gray,cv2.RETR_TREE,cv2.CHAIN_APPROX_SIMPLE)
print(contours[1])
cv2.drawContours(image,contours,1,(45,67,89),5)
cv2.imshow("k",gray)
cv2.imshow("j",image)
cv2.waitKey(0)
cv2.destroyAllWindows()

Answer 2

使用循环填充答案元素。在该循环中，您可以检查当前答案是否为正确答案并添加事件侦听器。

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);
  }
});

Answer 3

假设 triviaObj.results[0].correct_answer 是一个代表正确答案的数字，那么：

替换

let rightAnswer = triviaObj.results[0].correct_answer;

与

let rightAnswer = document.querySelector(`#answer${triviaObj.results[0].correct_answer}`);

这比Zan Anger的解决方案简单多了。

无法从 API 向元素添加事件侦听器

3 个答案: