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

【问题标题】：Redirecting from a HTML button to a new page with JS使用 JS 从 HTML 按钮重定向到新页面
【发布时间】：2022-02-12 05:42:02
【问题描述】：

这相当简单，我正在尝试使登录按钮起作用，如果电子邮件和密码中的内容与以下内容匹配，则重定向到不同的文件 (placeholder.html)：

我还没有让登录按钮首先工作以重定向，并且id希望通过使用'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>

【问题讨论】：

location.href = "placeholder.html?
使用if 检查输入值后。

标签： javascript html authentication

【解决方案1】：

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

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

我相信你正在寻找

location.href = "placeholder.html";

您希望根据用户输入的用户名和密码重定向用户，我将在下面提供解决方案，但在此之前，我想说这不安全，用户名和密码在源代码中可见代码，如果您打算使用它来隐藏重要信息，它将不起作用，因为任何访问该网页的人都可以看到该代码，您应该使用 NodeJS 或 PHP 等服务器端语言来隐藏该信息，我假设不过，这只是为了练习/学习。

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

您的<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";
  }
};

这也是区分大小写的。

【讨论】：

啊，非常感谢！！这非常有帮助！

【解决方案2】：

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

<!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>

【讨论】：