使用 JS 从 HTML 按钮重定向到新页面

Question

这很简单，我正在尝试使登录按钮正常工作，如果电子邮件和密码中的内容符合以下条件，则重定向到另一个文件 (placeholder.html)：

登录：管理员密码：Password123

我还没有让登录按钮首先工作以进行重定向，我想通过使用 'onlick=' 和 js 中的函数或 id 将其保留为按钮元素现在。

非常感谢您的帮助:) 抱歉，这有点草率，这是我第一次在这里寻求帮助哈哈

这是我目前所拥有的，完全有效的凹痕：

<!DOCTYPE html>
<html>

  <head>
    <title>Login page</title>
    <link href="style." rel="stylesheet" type="text/css" />
    <script src="script.js"></script>
  </head>

  <body>
    
    <div class="login-page">
    
      <div name="login" class="form">

        <div class="title login" style="font-size: 25px; font-family: Roboto; padding-bottom: 25px;">
          Login Form
        </div>

        <form class="login-form" action="login.php" method="post">

          <input type="email_" placeholder="email"/>

          <input type="password" placeholder="password"/>

          <button id="login_button">login</button>

          <p class="message" style="font-family: Roboto, sans-serif;">Not registered? 
            <a href="register.html">Create an account</a>
          </p>

        </form>

      </div>

    </div>

  </body>

  <script type="text/javascript">

    document.getElementById("login_button").onclick = function () {
        location.href = "#placeholder";
    };

</script>

</html>

Answer 1

有几种方法可以做到这一点，这里有一个简单的例子：

<!DOCTYPE html>
<html>

  <head>
    <title>Login page</title>
    <link href="style." rel="stylesheet" type="text/css" />
    <script src="script.js"></script>
  </head>

  <body>
    
    <div class="login-page">
    
      <div name="login" class="form">

        <div class="title login" style="font-size: 25px; font-family: Roboto; padding-bottom: 25px;">
          Login Form
        </div>

        <form class="login-form" action="login.php" method="post">

          <input type="email_" placeholder="email"/>

          <input type="password" placeholder="password"/>

          <button id="login_button" onclick="login()">login</button>

          <p class="message" style="font-family: Roboto, sans-serif;">Not registered? 
            <a href="register.html">Create an account</a>
          </p>

        </form>

      </div>

    </div>

  </body>

  <script type="text/javascript">

    function login() {
      // Login logic here
      if (loginSuccesful) {
        window.location.href = "/placeholder.html";
      }
    }

</script>

</html>

Answer 2

欢迎来到 Whosebug，作为答案的一部分，我想在这里介绍一些内容。

函数是运行 onClick，但是您使用location.href的方式是无效的。您正在重定向到一个锚点（它以 # 开头），在浏览器中实现的方式是，如果您的页面上有一个元素，它将把您的滚动定位重定向到带有 ID 的元素的顶部ID为placeholder（且页面高度超过100%）会移动页面的滚动位置，而不是重定向。

我相信你正在寻找

location.href = "placeholder.html";

你想让用户根据他们输入的用户名和密码被重定向，我会在下面提供解决方案，但在此之前，我想说这不安全，用户名和密码在里面是可见的源代码，如果您打算使用它来隐藏重要信息，它将不起作用，因为访问该网页的任何人都可以看到该代码，您应该使用 server-side 语言，例如 NodeJS 或 PHP为了隐藏该信息，我假设这仅适用于 practise/learning。

您要做的第一件事是获取用户名和密码。

您的 <input type="email_" placeholder="email"/> 应该是 <input type="text" placeholder="email"/>。出于某种原因，您将类型设置为 email_ 而不是 email，但由于您说用户名是 admin，所以只是 text.

我会首先为用户名和密码元素提供一个 ID。

<input type="email" id="username" placeholder="email"/>
<input type="password" id="password" placeholder="password"/>

然后在您的函数中，您可以将其更改为检查和重定向，如下所示

document.getElementById("login_button").onclick = function () {
  const username = document.getElementById("username").value
  const password = document.getElementById("password").value

  if (username === 'Admin' && password === 'Password123') {
    location.href = "placeholder.html";
  }
};

那也将是 case-sensitive。

使用 JS 从 HTML 按钮重定向到新页面

Redirecting from a HTML button to a new page with JS

html

javascript

authentication