登录页面window.location.href跳转失效，同方法其他页面正常求助

问题 #

正在学习网页设计与游戏/谜题设计，尝试制作一款ARG（另类实境游戏）。网站内其他页面都能通过window.location.href = '/pages/*INSERT FILENAME*.html'正常跳转，但登录页面（路径/pages/login.html）无法跳转到目标页面/pages/helloTest.html。

原本为登录页实现了简单的账号密码匹配逻辑，测试账号为“TWPD-TEST”、密码“TEST”，匹配后跳转至测试页面，但无论是否满足条件，点击按钮都无法跳转。即使移除判断逻辑，仅保留跳转代码，页面也只会刷新不跳转；把判断逻辑直接写在按钮onclick事件中同样无效。

使用VSCode的Live Server扩展在Windows 10本地部署网站，以下是login.html的代码：

<!-- src = /pages/login.html -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Authentication</title>
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
  </head>
  <body class="login">
    <center>
      <form action="">
        <label for="user">Username:</label>
        <input type="text" id="user" name="user"> <br>
        <label for="passwrd">Password: </label>
        <input type="password" id="passwrd" name="passwrd" /> <br /><br />
        <button id="login">Submit</button>
      </form>
    </center>
    <script>
      var user = document.getElementById("user").value;
      var passwrd = document.getElementById("passwrd").value;
      /* This was supposed to be a function to check the credentials and send the player to the respective page.
       function checkCredential() {
        if ((user == "TWPD-TEST") & (passwrd == "TEST")) {
          window.location.href = "/pages/helloTest.html";
        }
      }*/
      button.addEventListener("click", function () {
        if ((user == "TWPD-TEST") & (passwrd == "TEST")) {
          window.location.href = "/pages/helloTest.html";
        }
      });
      passwrd.addEventListener("keyup", function (event) {
        if (event.keyCode == 13) {
          button.click;
        }
      });
    </script>
  </body>
</html>

解决方案 #

你的代码存在几个关键问题，逐一修复后就能正常跳转：

• 表单默认提交行为未阻止
  按钮在<form>标签内时，默认会触发表单提交导致页面刷新，必须在点击事件中阻止这个默认行为：

  button.addEventListener("click", function (e) {
    e.preventDefault(); // 阻止表单默认提交
    // 后续逻辑...
  });
  

• 变量获取时机错误
  页面加载时就获取输入框值，此时输入框为空，后续判断的始终是初始空值。需要在点击事件内部实时获取当前输入值：

  button.addEventListener("click", function (e) {
    e.preventDefault();
    const user = document.getElementById("user").value;
    const passwrd = document.getElementById("passwrd").value;
    // 后续判断逻辑
  });
  

• 逻辑运算符错误
  使用了&（按位与）而非&&（逻辑与），逻辑判断必须用&&才是正确写法。

• 按钮元素未正确获取
  代码中直接使用button变量但未获取DOM元素，需要先获取登录按钮：

  const button = document.getElementById("login");
  

• 回车触发点击的语法错误
  button.click是属性而非方法，应该调用button.click()：

  passwrd.addEventListener("keyup", function (event) {
    if (event.keyCode === 13) {
      button.click();
    }
  });
  

修复后的完整代码 #

<!-- src = /pages/login.html -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Authentication</title>
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
  </head>
  <body class="login">
    <center>
      <form action="">
        <label for="user">Username:</label>
        <input type="text" id="user" name="user"> <br>
        <label for="passwrd">Password: </label>
        <input type="password" id="passwrd" name="passwrd" /> <br /><br />
        <button id="login">Submit</button>
      </form>
    </center>
    <script>
      const button = document.getElementById("login");
      const passwrdInput = document.getElementById("passwrd");

      button.addEventListener("click", function (e) {
        e.preventDefault();
        const user = document.getElementById("user").value;
        const passwrd = passwrdInput.value;
        if (user === "TWPD-TEST" && passwrd === "TEST") {
          window.location.href = "/pages/helloTest.html";
        }
      });

      passwrdInput.addEventListener("keyup", function (event) {
        if (event.key === "Enter") {
          button.click();
        }
      });
    </script>
  </body>
</html>

内容的提问来源于stack exchange，提问作者SAOarmy