我想在按下按钮时打开一个表单,然后在完成表单后创建另一个按钮以将数据存储在对象中。
我这样做了,但在第二个 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)
})
最佳答案
为什么你首先要调用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)
})
关于javascript - 您可以在另一个 .addEventListener 中添加一个 .addEventListener 来完成表单吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57463214/