新手求助：HTML/JavaScript登录通知功能及输入校验问题

AI 小北

2026-7-6

问题修复方案

核心问题分析

你的代码不生效有两个关键错误：

你在notification函数中判断的是DOM元素对象，而非输入框的value（用户实际输入内容）
函数参数名和全局变量名重复，导致函数内部无法正确引用输入框元素

修正后的完整代码

HTML代码

<input type="email" id="emailToLogin" placeholder="Enter your email" />
<input type="password" id="passwordToLogin" placeholder="Enter your password"/>

<button type="submit" id="log" onclick="notification()">
  <p>Log in</p>
</button>
<h1 id="successful"></h1>
<h1 id="unsuccessful"></h1>

JavaScript代码

let emailInput = document.getElementById("emailToLogin");
let passwordInput = document.getElementById("passwordToLogin");

function notification() {
    // 获取输入框的实际输入内容，去除首尾空白
    const emailValue = emailInput.value.trim();
    const passwordValue = passwordInput.value.trim();
    
    // 清空之前的提示内容，避免叠加显示
    document.getElementById("successful").innerHTML = "";
    document.getElementById("unsuccessful").innerHTML = "";

    if (!emailValue || !passwordValue) {
        document.getElementById("unsuccessful").innerHTML = "Fill in the remaining data";
        return;
    }

    // 此处可添加实际登录验证逻辑（比如判断账号密码是否正确）
    document.getElementById("successful").innerHTML = "Logged in!";
    // 后续可添加主页面跳转代码
}