登录按钮无法跳转至dashboard.html的问题排查与修复请求

核心问题定位： #

• 表单默认提交行为中断逻辑：登录按钮在<form>内，默认是submit类型，点击会触发页面刷新，JS校验逻辑还没执行就被打断。
• 输入框无id导致无法取值：邮箱、密码输入框未设置id="email"和id="password"，JS无法获取输入值完成校验。
• 提示元素位置不可见：loginStatus放在toggle-left面板中，登录状态下该面板被移出可视区域，提示信息无法显示。

修复方案： #

1. 阻止表单默认提交

将登录按钮的类型显式设为button，避免触发表单提交：

<button id="login" type="button">Log in</button>

2. 给输入框添加id属性

修改登录表单内的输入框，添加对应id：

<input type="email" placeholder="Email" id="email">
<input type="password" placeholder="Password" id="password">

3. 调整提示信息位置到登录表单内

将loginStatus元素移到登录表单中，确保登录状态下可见：

<div class="form-container sign-in">
    <form>
        <!-- 其他内容不变 -->
        <a href="#">Forget Your Password?</a>
        <p id="loginStatus"></p>
        <button id="login" type="button">Log in</button>
    </form>
</div>

修改后的完整HTML代码片段（关键部分）： #

<div class="form-container sign-in">
    <form>
        <h1>Sign In</h1>
        <div class="social-icons">
            <a href="#" class="icon" style="color: #67FF43;" title="Google Account"><i class="fa-brands fa-google-plus-g"></i></a>
            <a href="#" class="icon" style="color: #67FF43;" title="Facebook"><i class="fa-brands fa-facebook-f"></i></a>
            <a href="#" class="icon" style="color: #67FF43;" title="Github"><i class="fa-brands fa-github"></i></a>
            <a href="#" class="icon" style="color: #67FF43;" title="LinkedIn"><i class="fa-brands fa-linkedin-in"></i></a>
        </div>
        <span>or use your email password</span>
        <input type="email" placeholder="Email" id="email">
        <input type="password" placeholder="Password" id="password">
        <a href="#">Forget Your Password?</a>
        <p id="loginStatus"></p>
        <button id="login" type="button">Log in</button>
    </form>
</div>

额外优化（可选）： #

• 给提示信息添加样式，让它更显眼：

#loginStatus {
    color: #dc3545;
    font-size: 12px;
    margin: 8px 0;
}

• 登录成功时延迟跳转，让用户看到提示：

if (enteredEmail === predefinedEmail && enteredPassword === predefinedPassword) {
    const statusEl = document.getElementById("loginStatus");
    statusEl.textContent = "Login successful. Redirecting...";
    statusEl.style.color = "#28a745";
    setTimeout(() => {
        window.location.href = "dashboard.html";
    }, 1500);
} else {
    document.getElementById("loginStatus").textContent = "Login failed. Please check your email and password.";
}

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