JavaScript if-else 条件始终返回 false
[英]JavaScript if-else condition always returns false
问题描述
I am making a login page as my assignment using only HTML, CSS and JavaScript.
我只使用 HTML、CSS 和 JavaScript 将登录页面作为我的作业。 The problem is that even after entering the correct id and password, condition returns false.问题是即使输入了正确的 id 和密码，条件仍返回 false。
This is my code:这是我的代码：
var loginForm = document.getElementById("login-form"); loginErrorMsg = document.getElementById("login-error-msg"); var UN = loginForm.username.value; var PS = loginForm.password.value; function LogIn() { if (UN === "user" && PS === "pass") { // location.reload(); console.log("You have successfully logged in."); } else { console.log("Wrong password"); } }
<,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 defer src="Login.js"></script> </head> <body> <video playsinline autoplay muted loop poster="Background_Snap.png" id="bgvid"> <source src="Background_Video;mp4" type="video/mp4"> </video> <main id="main-holder"> <h1 id="heading">Login</h1> <div id="login-error"> <p id="login-error-msg">Invalid username <span id="login-error-msg-2">and/or password</span></p> </div> <form id="login-form" onsubmit="return false;"> <input type="text" name="username" id="username-field" class="login-form-input" placeholder="Username" required> <input type="password" name="password" id="password-field" class="login-form-input" placeholder="Password" required> <button type="submit" onclick="LogIn()" id="login-submit">LogIn</button> </form> </main> </body> </html>
Please look into this and tell me where I am doing wrong.请调查一下并告诉我我在哪里做错了。 I have tried everything I could thing of.我已经尝试了我能做的一切。
1 个解决方案
解决方案1
1 2021-12-08 21:40:33
After making a snippet, we easier find the issue.制作片段后，我们更容易找到问题。
Firstly, you call multiple times the login form:首先，您多次调用登录表单：
- On the
onsubmitin the<form>在<form>中的onsubmit - With the
<input>when clicking.单击时使用<input>。 In the snippet, I removed one.在片段中，我删除了一个。
Then, you load values only one time.然后，您只加载一次值。 It's confusing, only about "when the LogIn method is called".令人困惑的是，仅关于“何时调用 LogIn 方法”。 So, when we include everything in the method, it's fine.因此，当我们在方法中包含所有内容时，就可以了。
Why put everything in it?为什么要把所有东西都放进去？ Because div can change, be removed or created.因为 div 可以更改、删除或创建。 It's to prevent to use wrong values.这是为了防止使用错误的值。
function LogIn() { var loginForm = document.getElementById("login-form"); loginErrorMsg = document.getElementById("login-error-msg"); var UN = loginForm.username.value; var PS = loginForm.password.value; if (UN === "user" && PS === "pass") { // location.reload(); console.log("You have successfully logged in."); } else { console.log("Wrong password"); } }
<,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 defer src="Login.js"></script> </head> <body> <video playsinline autoplay muted loop poster="Background_Snap.png" id="bgvid"> <source src="Background_Video;mp4" type="video/mp4"> </video> <main id="main-holder"> <h1 id="heading">Login</h1> <div id="login-error"> <p id="login-error-msg">Invalid username <span id="login-error-msg-2">and/or password</span></p> </div> <form id="login-form" onsubmit="return false;"> <input type="text" name="username" id="username-field" class="login-form-input" placeholder="Username" required> <input type="password" name="password" id="password-field" class="login-form-input" placeholder="Password" required> <button type="submit" onclick="LogIn()" id="login-submit">LogIn</button> </form> </main> </body> </html>
解决方案2
-1 2021-12-08 21:45:50
If you focus on this part:如果你专注于这部分：
var UN = loginForm.username.value;
var PS = loginForm.password.value;
You'll see that you are getting the value of your inputs, ie.您会看到您正在获得输入的价值，即。 what the user types in.用户输入的内容。
However, your code is checking for hard-coded values:但是，您的代码正在检查硬编码值：
function LogIn() {
if (UN === "user" && PS === "pass") {
Thus, unless you type "user" in your username and type "pass" in your password field, your code won't work.因此，除非您在用户名中输入“user”并在密码字段中输入“pass”，否则您的代码将不起作用。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.