登录页面 html 和 javascript 不工作

Question

I was making a login page.我正在制作一个登录页面。 code:代码：

 const loginForm = document.getElementById("login-form"); const loginButton = document.getElementById("login-form-submit"); const loginErrorMsg = document.getElementById("login-error-msg"); function validate_login() { loginButton.addEventListener("click", (e) => { e.preventDefault(); const username = loginForm.username.value; const password = loginForm.password.value; if (username === "user" && password === "web_dev") { window.location.href="https://airtable.com" } else { loginErrorMsg.style.opacity = 1; } })}

 html { height: 100%; } body { height: 100%; margin: 0; font-family: Arial, Helvetica, sans-serif; display: grid; justify-items: center; align-items: center; background-color: #3a3a3a; } #main-holder { width: 50%; height: 70%; display: grid; justify-items: center; align-items: center; background-color: white; border-radius: 7px; box-shadow: 0px 0px 5px 2px black; } #login-error-msg-holder { width: 100%; height: 100%; display: grid; justify-items: center; align-items: center; } #login-error-msg { width: 23%; text-align: center; margin: 0; padding: 5px; font-size: 12px; font-weight: bold; color: #8a0000; border: 1px solid #8a0000; background-color: #e58f8f; opacity: 0; } #error-msg-second-line { display: block; } #login-form { align-self: flex-start; display: grid; justify-items: center; align-items: center; }.login-form-field::placeholder { color: #3a3a3a; }.login-form-field { border: none; border-bottom: 1px solid #3a3a3a; margin-bottom: 10px; border-radius: 3px; outline: none; padding: 0px 0px 5px 5px; } #login-form-submit { width: 100%; padding: 7px; border: none; border-radius: 5px; color: white; font-weight: bold; background-color: #3a3a3a; cursor: pointer; outline: none; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Login</title> <link rel="stylesheet" href="login.css"> <script type="text/javascript" src="login.js"></script> </head> <body> <main id="main-holder"> <h1 id="login-header">Login</h1> <div id="login-error-msg-holder"> <p id="login-error-msg">Invalid username <span id="error-msg-second-line">and/or password</span></p> </div> <form id="login-form"> <input type="text" name="username" id="username-field" class="login-form-field" placeholder="Username"> <input type="password" name="password" id="password-field" class="login-form-field" placeholder="Password"> <input type="submit" value="Login" id="login-form-submit" onclick="validate_login()"> </form> </main> </body> </html>

The css (I showed it because it shows text if the logins are incorrect but it doesn't work) and html work fine but the javascript doesn't work. css（我显示它是因为如果登录不正确它会显示文本但它不起作用）和 html 工作正常但 javascript 不起作用。 I am not sure why nothing happens when I press the submit button but I should get an alert.我不确定为什么当我按下提交按钮时没有任何反应，但我应该收到警报。 The javascript should check the username and password and then relocate the page.Any help is great. javascript 应该检查用户名和密码，然后重新定位页面。任何帮助都很好。 Thanks!!谢谢！！

Answer 1

As j08691 explained in their comment , your click event handler is creating the event listener after the first click.正如 j08691 在他们的评论中解释的那样，您的点击事件处理程序在第一次点击后创建事件侦听器。 Instead you should simply create the event listener by removing function validate_login() { and the corresponding } , and remove the onclick attribute in the HTML.相反，您应该简单地通过删除function validate_login() {和相应的}创建事件侦听器，并删除 HTML 中的onclick属性。

 const loginForm = document.getElementById("login-form"); const loginButton = document.getElementById("login-form-submit"); const loginErrorMsg = document.getElementById("login-error-msg"); loginButton.addEventListener("click", (e) => { e.preventDefault(); const username = loginForm.username.value; const password = loginForm.password.value; if (username === "user" && password === "web_dev") { window.location.href="https://airtable.com" } else { loginErrorMsg.style.opacity = 1; } })

 html { height: 100%; } body { height: 100%; margin: 0; font-family: Arial, Helvetica, sans-serif; display: grid; justify-items: center; align-items: center; background-color: #3a3a3a; } #main-holder { width: 50%; height: 70%; display: grid; justify-items: center; align-items: center; background-color: white; border-radius: 7px; box-shadow: 0px 0px 5px 2px black; } #login-error-msg-holder { width: 100%; height: 100%; display: grid; justify-items: center; align-items: center; } #login-error-msg { width: 23%; text-align: center; margin: 0; padding: 5px; font-size: 12px; font-weight: bold; color: #8a0000; border: 1px solid #8a0000; background-color: #e58f8f; opacity: 0; } #error-msg-second-line { display: block; } #login-form { align-self: flex-start; display: grid; justify-items: center; align-items: center; }.login-form-field::placeholder { color: #3a3a3a; }.login-form-field { border: none; border-bottom: 1px solid #3a3a3a; margin-bottom: 10px; border-radius: 3px; outline: none; padding: 0px 0px 5px 5px; } #login-form-submit { width: 100%; padding: 7px; border: none; border-radius: 5px; color: white; font-weight: bold; background-color: #3a3a3a; cursor: pointer; outline: none; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Login</title> <link rel="stylesheet" href="login.css"> <script type="text/javascript" src="login.js"></script> </head> <body> <main id="main-holder"> <h1 id="login-header">Login</h1> <div id="login-error-msg-holder"> <p id="login-error-msg">Invalid username <span id="error-msg-second-line">and/or password</span></p> </div> <form id="login-form"> <input type="text" name="username" id="username-field" class="login-form-field" placeholder="Username"> <input type="password" name="password" id="password-field" class="login-form-field" placeholder="Password"> <input type="submit" value="Login" id="login-form-submit"> </form> </main> </body> </html>

登录页面 html 和 javascript 不工作

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-02-17 22:45:39

登录页面 html 和 javascript 不工作

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-02-17 22:45:39

解决方案1
1 已采纳 2022-02-17 22:45:39