Javascript 阻止所有其他函数的未捕获类型错误

运行代码时，我在控制台上不断收到一个“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>

.JS
//注册新用户
const signupForm=document.querySelector（“#signupForm”）；
signupForm.addEventListener（“提交”，（e）=>{
e、 预防默认值（）；
//获取用户信息
const email=signupForm[“登录电子邮件”]。值；
const password=signupForm[“登录密码”]。值；
//检查电子邮件地址
如果（！email.includes（@companyName.ac.uk）））{
console.log（“无效电子邮件地址”）；
window.location.replace（“404.html”）；
}否则{
//注册用户
auth.createUserWithEmailAndPassword（电子邮件，密码）。然后（（cred）=>{
const loader=document.querySelector（“.formPro”）；
loader.style.display=“块”；
//加载动画+关闭模式
设置超时（（）=>{
const modal=document.querySelector（“模态注册”）；
M.Modal.getInstance（Modal.close（）；
signupForm.reset（）；
loader.style.display=“无”；
window.location.replace（“eoi tracker.html”）；
}, 5000);
});
}
});
.HTML

将该函数包装到页面加载事件中，您就可以开始了。这将确保您仅在页面上创建元素后搜索

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);
    });
  }
});
}

---

在添加eventListener之前，请尝试控制台日志记录

signupForm

。在创建元素之前，您的代码可能正在运行。请尝试此操作，我得到“无法访问”“注册表单”，然后返回“初始化”。我的脚本标签已经在我的页面底部。这是解决这个问题的一种方法吗？我仍然会遇到这样的错误：未捕获引用错误：在pageFullyLoaded（auth.js:3）pageFullyLoaded@auth.js:3 load（async）（anonymous）@auth.js:1初始化之前无法访问“signupForm”，是否在其他地方声明了变量

signupForm

？