0

运行代码时，我的控制台上不断出现“未捕获的类型错误：无法读取属性 'addEventListener' of null”错误。所有其他功能都可以正常工作。它似乎与单个事件侦听器有关。如果我删除代码块，我的其余功能将完美运行。我试过移动我的脚本标签，但似乎无法修复它..

    .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>
4

1 回答 1

0

将该函数包装在页面加载事件中，您应该一切顺利。这将确保您仅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);
    });
  }
});
}
于 2020-11-20T04:09:23.613 回答