JavaScript if-else 條件始終返回 false
[英]JavaScript if-else condition always returns false
問題描述
我只使用 HTML、CSS 和 JavaScript 將登錄頁面作為我的作業。 問題是即使輸入了正確的 id 和密碼，條件仍返回 false。
這是我的代碼：
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>
請調查一下並告訴我我在哪里做錯了。 我已經嘗試了我能做的一切。
1 個解決方案
解決方案1
1 2021-12-08 21:40:33
制作片段后，我們更容易找到問題。
首先，您多次調用登錄表單：
- 在
<form>中的onsubmit - 單擊時使用
<input>。 在片段中，我刪除了一個。
然后，您只加載一次值。 令人困惑的是，僅關於“何時調用 LogIn 方法”。 因此，當我們在方法中包含所有內容時，就可以了。
為什么要把所有東西都放進去？ 因為 div 可以更改、刪除或創建。 這是為了防止使用錯誤的值。
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
如果你專注於這部分：
var UN = loginForm.username.value;
var PS = loginForm.password.value;
您會看到您正在獲得輸入的價值，即。 用戶輸入的內容。
但是，您的代碼正在檢查硬編碼值：
function LogIn() {
if (UN === "user" && PS === "pass") {
因此，除非您在用戶名中輸入“user”並在密碼字段中輸入“pass”，否則您的代碼將不起作用。
javascript表單驗證即使條件匹配也總是返回true，並且應該返回false
[英]javascript form validation always returns true even when condition matches and should returns false
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.