如何使此多次登錄將我帶到代碼中的另一個 html？ (JavaScript)

Question

我開始了一個初學者項目，以通過多用戶 ATM 了解更多關於 JS 的知識。

我想做的事情：

3 登錄時有密碼和余額的用戶
登錄頁面應將您重定向到 ATM 站點，它會在預建的計算器中顯示您的余額

我也想讓 ATM 工作，但我首先需要正確登錄這是我的代碼

 // Login: Try limit, page change, usernames let entryCount = 1; let entryLimit = 3; let users = [ { name: "Emilio", password: "a", balance: 1000 }, { name: "Andrea", password: "b", balance: 20000 }, { name: "Hugo", password: "c", balance: 300000 }, ]; let mainScreen = document.getElementById('login-page') let conctentAccountScreen = document.createTextNode("account screen") let accountScreen = document.createElement("span").setAttribute("id", "accountScreen") // Login let button = document.getElementById ('login'); button.onclick = function() { let username = document.getElementById('user').value; let password = document.getElementById('pass').value; userExists = false correctPassword = false saldoExists = false for (let i = 0; i < users.length; i++) { if (username == users[i].username && password == users[i].password) { userExists = true correctPassword = true saldoExists = true window.location.href = "atm.html" } else{ alert('Try again bro') } if (entryCount < entryLimit) { entryCount++ alert('Username or Password are incorrect, please try again') } else { alert('You exceeded the number of tries') window.location.href = "index.html" } } }

 @import url(https://fonts.googleapis.com/css?family=Roboto:300); .login-page { width: 360px; padding: 8% 0 0; margin: auto; }.form { position: relative; z-index: 1; background: #FFFFFF; max-width: 360px; margin: 0 auto 100px; padding: 45px; text-align: center; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); }.form input { font-family: "Roboto", sans-serif; outline: 0; background: #f2f2f2; width: 100%; border: 0; margin: 0 0 15px; padding: 15px; box-sizing: border-box;font-size: 14px; } h1 { font-family: "Roboto", sans-serif; width: 100%; border: 0; box-sizing: border-box;font-size: 25px; margin-bottom: 50px; }.form button { font-family: "Roboto", sans-serif; text-transform: uppercase; outline: 0; background: #fce205; width: 100%; border: 0; padding: 15px; color: #FFFFFF; font-size: 14px; -webkit-transition: all 0.3 ease; transition: all 0.3 ease; cursor: pointer; }.form button:hover,.form button:active,.form button:focus { background: #ffbf00; }.form.message { margin: 15px 0 0; color: #b3b3b3; font-size: 12px; }.form.message a { color: #4CAF50; text-decoration: none; }.form.register-form { display: none; }.container { position: relative; z-index: 1; max-width: 300px; margin: 0 auto; }.container:before, .container:after { content: ""; display: block; clear: both; }.container.info { margin: 50px auto; text-align: center; }.container.info h1 { margin: 0 0 15px; padding: 0; font-size: 36px; font-weight: 300;color: #1a1a1a; .container.info span { color: #4d4d4d; font-size: 12px; }.container.info span a { color: #000000; text-decoration: none; }.container.info span.fa { color: #EF3B3A; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <.-- CSS with Bootstrap --> <link rel="stylesheet" href="css/style,css"> <script src="js/index.js"></script> <title>ATM</title> </head> <body> <div class="login-page"> <div class="form"> <h1>Welcome back to your bank, please log in.</h1> <form class="login-form"> <input type="text" placeholder="username" id="user"> <input type="password" placeholder="password" id="pass"> <button id="login" type="button">login</button> </form> </div> </div> <!-- JAVASCRIPT --> </body> </html>

Answer 1

不知道這是否是您所需要的，但要通過 Javascript 更改 html 頁面，您可以簡單地執行以下操作：

location.href = '/something.html';

或者像這樣的外部站點：

location.href = "https://stackoverflow.com/";

此外，當您為users數組中的每個用戶執行alert('Try again bro')時，您的代碼也會反復發出警報...還有userExists 、 correctPassword和saldoExists在哪里聲明？

現在，如果用戶和密碼存在，這似乎是一種更好的處理方式，不知道這是否是您正在嘗試的：

button.onclick = function() {
    let username = document.getElementById('user').value; 
    let password = document.getElementById('pass').value;

    const user = user.find(x => username == x.username && password == x.password);
    
    if (user) {
        // Do whataver you want if user is found.
        location.href = "atm.html"
    } else {
        // Do whataver you want if user is NOT found.
        alert('Try again bro');
    }
}

至於最后的觀察，您可能想在 html 的正文末尾導入 Javascript 文件（有關原因的更多信息，請訪問： https://hackinbits.com/interview-questions/html/why-script-tags -should-be-placed-at-the-end-of-body-tag ） （這也可能導致您評論的錯誤）

如何使此多次登錄將我帶到代碼中的另一個 html？ (JavaScript)

問題描述

1 個解決方案

解決方案1
0 2022-03-01 01:52:22

如何使此多次登錄將我帶到代碼中的另一個 html？ (JavaScript)

問題描述

1 個解決方案

解決方案1 0 2022-03-01 01:52:22

解決方案1
0 2022-03-01 01:52:22