How to add onchange listener to html elements?-CodePudding

I tried to add onchange event listener to input elements that are created by using createElement() but I keep getting this error: TypeError: Cannot read properties of null (reading 'addEventListener'), and onchange event will run a funtion that take a para and event

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
          )}`
        );
        
         const radioButton = document.querySelector("input[type='radio']");
        radioButton.addEventListener("change", (event) => {
          handleSelectAnswer(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(correctAnswer)
}

CodePudding user response：

That happens because you query the radio inputs before they are mounted to the DOM, just try to addEventListener directly to answerInput.

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.addEventListener("change", (event) => {
          handleSelectAnswer(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);
      });