如何为HTML元素添加onchange事件监听器？报错排查

错误原因 #

1. DOM查询时机错误：你创建的answerInput还没通过append添加到DOM树，此时用document.querySelector("input[type='radio']")要么找不到元素返回null，要么匹配到页面上已存在的其他radio，并非当前创建的元素。
2. 函数名称不匹配：代码里调用的handleSelectAnswer和你定义的handleChange名称不一致，后续会触发函数未定义的错误。

修正后的代码 #

allAnswers.forEach((answer) => {
  const answerDiv = document.createElement("div");
  const answerInput = document.createElement("input");
  const decodedAnswer = decode(answer);

  answerInput.setAttribute("type", "radio");
  answerInput.setAttribute("class", "radio-btn");
  answerInput.setAttribute("name", `question-no-${quizz.indexOf(quiz)}`);
  answerInput.setAttribute("value", `${decodedAnswer}`);
  answerInput.setAttribute(
    "id",
    `question-${quizz.indexOf(quiz)}--answer-${allAnswers.indexOf(answer)}`
  );
  
  // 直接给刚创建的answerInput绑定事件，无需查询DOM
  answerInput.addEventListener("change", (event) => {
    handleChange(event, quiz.correct_answer);
  });       

  const answerLabel = document.createElement("label");
  answerLabel.setAttribute(
    "for",
    `question-${quizz.indexOf(quiz)}--answer-${allAnswers.indexOf(answer)}`
  );
  answerLabel.textContent = decodedAnswer;
  answerDiv.append(answerInput, answerLabel);
  answersContent.append(answerDiv);
});

function handleChange(event, correctAnswer){
  console.log("选中的选项值:", event.target.value);
  console.log("正确答案:", correctAnswer);
}

关键修改点 #

• 移除document.querySelector查询，直接使用创建好的answerInput对象添加事件，既避免空指针，又确保绑定的是当前创建的radio元素。
• 统一处理函数名称为handleChange，保证调用与定义一致。
• 通过event.target可以获取触发事件的radio元素，方便获取选中值等信息。

内容的提问来源于stack exchange，提问作者Đức Seven