HTML/JS银行账户模拟系统登录后页面空白问题求助

问题根源 #

登录成功后页面空白，是因为你的登录逻辑仅隐藏了登录模块，没有根据登录的用户名显示对应的账户操作界面，也未调用余额展示函数，导致页面除了顶部标题外无其他可见内容。

修复方案 #

修改login函数，在验证用户名密码正确后，根据登录的用户名，将对应账户的div设置为可见，并调用对应的余额显示函数：

function login() {
    let username = document.getElementById("username").value;
    let password = document.getElementById("password").value;

    if (users[username] == password) {
        document.getElementById("login").style.display = "none";
        // 根据用户名显示对应账户界面并加载余额
        switch(username) {
            case "usuario1":
                document.getElementById("account1").style.display = "block";
                showBalance1();
                break;
            case "usuario2":
                document.getElementById("account2").style.display = "block";
                showBalance2();
                break;
            case "usuario3":
                document.getElementById("account3").style.display = "block";
                showBalance3();
                break;
        }
    } else {
        alert("Nombre de usuario o contraseña incorrectos.");
    }
}

额外优化建议 #

• 可以将账户数据和用户信息关联起来，减少重复的函数（比如deposit1、deposit2这类重复代码），例如用一个对象存储所有账户，通过用户名直接关联对应的账户信息，统一操作逻辑。
• 处理prompt输入非数字的情况，避免parseInt导致余额变成NaN，比如增加输入验证：

  let amount = parseInt(prompt("Ingrese la cantidad a depositar:"));
  if (isNaN(amount) || amount <= 0) {
      alert("请输入有效的正数金额");
      return;
  }
  

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Bank Account Simulation</title>
</head>
<body>
    <h1>Bank Account Simulation</h1>

    <div id="login">
        <h2>Login</h2>
        <p>Username: <input type="text" id="username"></p>
        <p>Password: <input type="password" id="password"></p>
        <button onclick="login()">Login</button>
    </div>

    <div id="account1" style="display:none;">
        <h2>Account 1</h2>
        <p>Balance: <span id="balance1"></span></p>
        <button onclick="deposit1()">Deposit</button>
        <button onclick="withdraw1()">Withdraw</button>
    </div>

    <div id="account2" style="display:none;">
        <h2>Account 2</h2>
        <p>Balance: <span id="balance2"></span></p>
        <button onclick="deposit2()">Deposit</button>
        <button onclick="withdraw2()">Withdraw</button>
    </div>

    <div id="account3" style="display:none;">
        <h2>Account 3</h2>
        <p>Balance: <span id="balance3"></span></p>
        <button onclick="deposit3()">Deposit</button>
        <button onclick="withdraw3()">Withdraw</button>
    </div>

    <script type="text/javascript">
        let account1 = {
            balance: 100
        };
        let account2 = {
            balance: 200
        };
        let account3 = {
            balance: 300
        };

        let users = {
            "usuario1": "contraseña1",
            "usuario2": "contraseña2",
            "usuario3": "contraseña3"
        };

        function showBalance1() {
            document.getElementById("balance1").innerHTML = account1.balance;
        }
        function showBalance2() {
            document.getElementById("balance2").innerHTML = account2.balance;
        }
        function showBalance3() {
            document.getElementById("balance3").innerHTML = account3.balance;
        }

        function deposit1() {
            let amount = parseInt(prompt("Ingrese la cantidad a depositar:"));
            if (isNaN(amount) || amount <= 0) {
                alert("请输入有效的正数金额");
                return;
            }
            account1.balance += amount;
            validateBalance(account1);
            showBalance1();
        }
        function deposit2() {
            let amount = parseInt(prompt("Ingrese la cantidad a depositar:"));
            if (isNaN(amount) || amount <= 0) {
                alert("请输入有效的正数金额");
                return;
            }
            account2.balance += amount;
            validateBalance(account2);
            showBalance2();
        }
        function deposit3() {
            let amount = parseInt(prompt("Ingrese la cantidad a depositar:"));
            if (isNaN(amount) || amount <= 0) {
                alert("请输入有效的正数金额");
                return;
            }
            account3.balance += amount;
            validateBalance(account3);
            showBalance3();
        }

        function withdraw1() {
            let amount = parseInt(prompt("Ingrese la cantidad a retirar:"));
            if (isNaN(amount) || amount <= 0) {
                alert("请输入有效的正数金额");
                return;
            }
            account1.balance -= amount;
            validateBalance(account1);
            showBalance1();
        }
        function withdraw2() {
            let amount = parseInt(prompt("Ingrese la cantidad a retirar:"));
            if (isNaN(amount) || amount <= 0) {
                alert("请输入有效的正数金额");
                return;
            }
            account2.balance -= amount;
            validateBalance(account2);
            showBalance2();
        }
        function withdraw3() {
            let amount = parseInt(prompt("Ingrese la cantidad a retirar:"));
            if (isNaN(amount) || amount <= 0) {
                alert("请输入有效的正数金额");
                return;
            }
            account3.balance -= amount;
            validateBalance(account3);
            showBalance3();
        }

         function validateBalance(account) {
             if (account.balance > 990) {
                 account.balance = 990;
                 alert("La cuenta no puede tener más de $990.");
             }
             if (account.balance < 10) {
                 account.balance = 10;
                 alert("La cuenta no puede tener menos de $10.");
             }
         }

         function login() {
             let username = document.getElementById("username").value;
             let password = document.getElementById("password").value;

             if (users[username] == password) {
                 document.getElementById("login").style.display = "none";
                 // 根据匹配的用户名显示对应账户界面
                 switch(username) {
                     case "usuario1":
                         document.getElementById("account1").style.display = "block";
                         showBalance1();
                         break;
                     case "usuario2":
                         document.getElementById("account2").style.display = "block";
                         showBalance2();
                         break;
                     case "usuario3":
                         document.getElementById("account3").style.display = "block";
                         showBalance3();
                         break;
                 }
             } else {
                 alert("Nombre de usuario o contraseña incorrectos.");
             }
         }
    </script>

</body>
</html>

内容的提问来源于stack exchange，提问作者Alex19