未捕获的TypeError，它阻止所有其他函数

Question

运行代码时，我在控制台上不断收到"Uncaught TypeError:无法读取null的属性"addEventListener"错误。所有其他功能都在正常工作，没有任何问题。它似乎与单个事件侦听器有关。如果我删除代码块，那么我的其余函数将完美运行。我试着移动我的脚本标签，但似乎无法修复。

.JS
// sign-up a new user
const signupForm = document.querySelector("#signup-form");
signupForm.addEventListener("submit", (e) => {
e.preventDefault();

// get user info
const email = signupForm["login-email"].value;
const password = signupForm["login-password"].value;
// Check email address
if (!email.includes("@companyName.ac.uk")) {
console.log("invalid email address");
window.location.replace("404.html");
} else {
// sign up user
auth.createUserWithEmailAndPassword(email, password).then((cred) => {
const loader = document.querySelector(".formPro");
loader.style.display = "block";
// Load animation + close modal
setTimeout(() => {
const modal = document.querySelector("#modal-signup");
M.Modal.getInstance(modal).close();
signupForm.reset();
loader.style.display = "none";
window.location.replace("eoi-tracker.html");
}, 5000);
});
}
});
.HTML
<!-- scripts -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="materialize.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="app.js"></script>
<script src="auth.js"></script>

Answer 1

将该函数封装在页面加载事件中，您应该可以开始了。这将确保您只在页面上创建元素后才搜索signupForm。

window.addEventListener("load", pageFullyLoaded, false);
function pageFullyLoaded(){
const signupForm = document.querySelector("#signup-form");
signupForm.addEventListener("submit", (e) => {
e.preventDefault();

// get user info
const email = signupForm["login-email"].value;
const password = signupForm["login-password"].value;
// Check email address
if (!email.includes("@companyName.ac.uk")) {
console.log("invalid email address");
window.location.replace("404.html");
} else {
// sign up user
auth.createUserWithEmailAndPassword(email, password).then((cred) => {
const loader = document.querySelector(".formPro");
loader.style.display = "block";
// Load animation + close modal
setTimeout(() => {
const modal = document.querySelector("#modal-signup");
M.Modal.getInstance(modal).close();
signupForm.reset();
loader.style.display = "none";
window.location.replace("eoi-tracker.html");
}, 5000);
});
}
});
}