为什么我的页面不会转到另一个页面，即使我使用与以前相同的方法？

问题描述 投票：0回答：1

因此，为了学习一些网页设计和一点游戏/谜题设计，我决定尝试制作一个 ARG（另类现实游戏，如果你不知道的话），并且所有正常页面都可以正常工作。然而，当我开始制作一个将隐藏一些秘密的登录页面时，它不会移动到下一页。

我用来移动页面的方法是标准的 

window.location.href = '/pages/*INSERT FILENAME*.html'
，对于网站的整个其余部分，它按预期工作。但对于登录页面，我一直在尝试实现一个非常基本的条件来检查匹配的用户名和密码，其中我设置了一个测试用户，该用户会将页面移动到过度美化的“Hello World”页面。但无论出于什么原因，它都不会动。我什至将其设置为只要按下按钮，无论输入如何，都会将您发送到 hello world 页面，但它仍然不起作用。有问题的页面是/pages/login.html，它正在尝试转到/pages/helloTest.html，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>

现在，我尝试将条件设置在按钮中的 

onclick
事件内部，并废弃整个脚本，但仍然没有任何结果。该页面将重新加载并且不会移动。我是不是做错了什么？

对于其他上下文，我正在 Windows 10 计算机上使用 VSCode 的 Live Server 扩展在本地部署站点（因为我的计算机显然不满足 Win11 的规范要求）。

javascript html
1个回答
0
投票

您无法向 

button
添加事件侦听器，因为这不是任何元素的 ID。 Button 是类型，而不是 ID。

您需要获取对特定按钮的引用，然后向其添加侦听器。示例：

var loginButton = document.getElementById("login");
loginButton.addEventListener("click", function () {
    if ((user == "TWPD-TEST") & (passwrd == "TEST")) {
      window.location.href = "/pages/helloTest.html";
    }
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.