javascript - 您可以在另一个 .addEventListener 中添加一个 .addEventListener 来完成表单吗？

Question

我想在按下按钮时打开一个表单，然后在完成表单后创建另一个按钮以将数据存储在对象中。

我这样做了，但在第二个 addEventListener 中它给了我这个错误:

cannot read property 'addEventListener' of null

const newStudentButton = document.getElementById("addStudent");
const introducingButton = document.getElementById('introducingStudent');
newStudentButton.addEventListener("click", function () {
  let firstName;
  let lastName;
  let age;
  let eyeColor;
  let hairColor;
  let programmingSkills;

  formDiv.innerHTML += "<form><h3 class = 'form_title'>First Name: </h3><br><input type = 'text' id = 'firstName' class = 'form_input'></form>"
  firstName = document.getElementById('firstName').value;

  formDiv.innerHTML += "<form><h3 class = 'form_title'>Last Name: </h3><br><input type = 'text' id = 'lastName' class = 'form_input'></form>"
  lastName = document.getElementById('lastName').value;

  formDiv.innerHTML += "<form><h3 class = 'form_title'>Age: </h3><br><input type = 'text' id = 'age' class = 'form_input'></form>"
  age = document.getElementById('age').value;

  formDiv.innerHTML += "<form><h3 class = 'form_title'>Eye Color: </h3><br><input type = 'text' id = 'eyeColor' class = 'form_input'></form>"
  eyeColor = document.getElementById('eyeColor').value;

  formDiv.innerHTML += "<form><h3 class = 'form_title'>Hair Color: </h3><br><input type = 'text' id = 'hairColor' class = 'form_input'></form>"
  age = document.getElementById('hairColor').value;

  formDiv.innerHTML += "<form><h3 class = 'form_title'>Programming Skils: </h3><br><input type = 'text' id = 'programmingSkills' class = 'form_input'></form>"
  programmingSkills = document.getElementById('programmingSkills').value;

  formDiv.innerHTML += "<button type = 'button' id = 'introducingStudent'>Submit</button>"

  introducingButton.addEventListener("click", function() {
  var newStudent = {
    firstName: firstName,
    lastName: lastName,
    age: age,
    eyeColor: eyeColor,
    hairColor: hairColor,
    programmingSkills: programmingSkills
  }
  allStudents.push(newStudent)
  console.log(allStudents)
})

Answer 1

为什么你首先要调用document.getElementById('introducingStudent');。当页面加载时，id 为 introducingStudent 的 div 为 null，因为它仅在单击 newStudentButton 时创建。因此 document.getElementById('introducingStudent'); 应该仅在 newStudentButton

的单击事件之后执行

const newStudentButton = document.getElementById("addStudent");
newStudentButton.addEventListener("click", function () {
  let firstName;
  let lastName;
  let age;
  let eyeColor;
  let hairColor;
  let programmingSkills;

  formDiv.innerHTML += "<form><h3 class = 'form_title'>First Name: </h3><br><input type = 'text' id = 'firstName' class = 'form_input'></form>"
  firstName = document.getElementById('firstName').value;

  formDiv.innerHTML += "<form><h3 class = 'form_title'>Last Name: </h3><br><input type = 'text' id = 'lastName' class = 'form_input'></form>"
  lastName = document.getElementById('lastName').value;

  formDiv.innerHTML += "<form><h3 class = 'form_title'>Age: </h3><br><input type = 'text' id = 'age' class = 'form_input'></form>"
  age = document.getElementById('age').value;

  formDiv.innerHTML += "<form><h3 class = 'form_title'>Eye Color: </h3><br><input type = 'text' id = 'eyeColor' class = 'form_input'></form>"
  eyeColor = document.getElementById('eyeColor').value;

  formDiv.innerHTML += "<form><h3 class = 'form_title'>Hair Color: </h3><br><input type = 'text' id = 'hairColor' class = 'form_input'></form>"
  age = document.getElementById('hairColor').value;

  formDiv.innerHTML += "<form><h3 class = 'form_title'>Programming Skils: </h3><br><input type = 'text' id = 'programmingSkills' class = 'form_input'></form>"
  programmingSkills = document.getElementById('programmingSkills').value;

  formDiv.innerHTML += "<button type = 'button' id = 'introducingStudent'>Submit</button>"

  const introducingButton = document.getElementById('introducingStudent');
  introducingButton.addEventListener("click", function() {
  var newStudent = {
    firstName: firstName,
    lastName: lastName,
    age: age,
    eyeColor: eyeColor,
    hairColor: hairColor,
    programmingSkills: programmingSkills
  }
  allStudents.push(newStudent)
  console.log(allStudents)
})