如何使此多次登录将我带到代码中的另一个 html？ (JavaScript)

Question

I started a beginners project to learn more about JS with a multiuser ATM.我开始了一个初学者项目，以通过多用户 ATM 了解更多关于 JS 的知识。

Things I'm trying to do:我想做的事情：

3 Users that have password and balance when they log in 3 登录时有密码和余额的用户
The login page should redirect you to the ATM site, and it will show you your balance in a pre-built calculator登录页面应将您重定向到 ATM 站点，它会在预建的计算器中显示您的余额

I want to make the ATM work too but I first need to get the login right Here is my code我也想让 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

Dunno if this is what you need, but to change the html page via Javascript you can simply do:不知道这是否是您所需要的，但要通过 Javascript 更改 html 页面，您可以简单地执行以下操作：

location.href = '/something.html';

Or to an external site like this:或者像这样的外部站点：

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

Also your code will alert repeatedly as you are doing alert('Try again bro') for EVERY user in the users array... also where is userExists , correctPassword and saldoExists being declarated?此外，当您为users数组中的每个用户执行alert('Try again bro')时，您的代码也会反复发出警报...还有userExists 、 correctPassword和saldoExists在哪里声明？

Now this seems a better way of handling if user and password exists, dunno if it's what you're trying tho:现在，如果用户和密码存在，这似乎是一种更好的处理方式，不知道这是否是您正在尝试的：

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');
    }
}

And as so for last observation, you might like to import your Javascript file at the end of the body in the html (more information about why here: https://hackinbits.com/interview-questions/html/why-script-tags-should-be-placed-at-the-end-of-body-tag ) (this is also potentially causing the error you commented)至于最后的观察，您可能想在 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