阅读另一个路由中的表单时，无法读取SPA JavaScript中的null属性[重复]

ljo96ir5 于 5个月前发布在 Java

关注(0)|答案(1)|浏览(73)

此问题在此处已有答案：

Why does jQuery or a DOM method such as getElementById not find the element?（7个答案）
2天前关闭。
我有下面的单页应用程序，但是当我转到登录路径并提交时，表单的事件侦听器没有被触发
我得到这个错误：
无法读取null的属性（阅读“addEventListener”）
登录时？session%5Bemail%5D= fdf%40gmail.com &session%5Bpassword%5D=dfdf&session%5Bremember_me%5D=0：34：6

这是首页

<!DOCTYPE html>
<html>
    <head>
        <title>Vanilla SPA Router</title>
        <meta charset="UTF-8" />
        <link rel="stylesheet" href="css/styles.css" />
        <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet" />
    </head>

    <body>
        <div id="root">
            <nav id="main-nav" class="sidebar">
                <a href="/" onclick="route()">Home</a>
                <a href="/about" onclick="route()">About</a>
                <a href="/lorem" onclick="route()">Lorem</a>
                <a href="/login" onclick="route()">login</a>

            </nav>
            <div id="main-page"></div>
        </div>


<script>
  const form = document.querySelector("#userinfo");
  console.log("I'm here 1");
async function sendData() {
  console.log("I'm here 2");
  const outputElement = document.getElementById('output');
    outputElement.innerHTML = "change success";

}
// Take over form submission
form.addEventListener("submit", (event) => {
  event.preventDefault();
  sendData();
});
</script>

        <script src="js/router.js"></script>
    </body>
</html>

字符串

这是登录页面

<div class='row'>
      <div class='col-md-6 col-md-offset-3'>
        
          <form id="userinfo">
  
              <label for="session_email">Email</label>
              <input class="form-control" type="email" name="session[email]" id="session_email" />
  
              <label for="session_password">Password</label>
              <a href="/password_resets/new">(forgot password)</a>
              <input class="form-control" type="password" name="session[password]" id="session_password" />
  
              <label class="checkbox inline" for="session_remember_me">
                  <input name="session[remember_me]" type="hidden" value="0" autocomplete="off" /><input type="checkbox" value="1" name="session[remember_me]" id="session_remember_me" />
                  <span>Remember me on this computer</span>
  </label>
  <input type="submit" value="Submit" />
  </form>
          <p>New user? <a href="/signup">sign up now!</a></p>
      </div>
      <div id="output" style="color:black">
        before change
      </div>
  </div>

型

JavaScript代码

const route = (event) => {
    event = event || window.event;
    event.preventDefault();
    window.history.pushState({}, "", event.target.href);
    handleLocation();
};

const routes = {
    404: "/pages/404.html",
    "/": "/pages/index.html",
    "/about": "/pages/about.html",
    "/lorem": "/pages/lorem.html",
    "/login": "/pages/login.html",

};

const handleLocation = async () => {
    const path = window.location.pathname;
    const route = routes[path] || routes[404];
    const html = await fetch(route).then((data) => data.text());
    document.getElementById("main-page").innerHTML = html;
};

window.onpopstate = handleLocation;
window.route = route;

handleLocation();

型

JavaScript

来源：https://stackoverflow.com/questions/77743336/cannot-read-properties-of-null-in-spa-javascript-when-reading-a-form-in-another