JavaScript登录按钮点击后控制台输出异常问题求助

可能原因及解决方案 #

1. 浏览器控制台设置导致日志折叠 #

多数浏览器控制台默认会折叠重复或相似的日志消息，视觉上看起来只显示了最后一条。你可以：

• 打开控制台右上角的设置图标（⚙️）
• 找到「Console」相关选项，取消勾选「Group similar messages」（分组相似消息）
• 同时勾选「Preserve log」（保留日志），避免页面刷新时清空历史日志

2. 表单默认提交行为导致页面刷新 #

如果登录按钮嵌套在 <form> 标签内，点击按钮会触发表单默认提交行为，页面刷新后控制台日志会被清空，仅保留刷新前的最后一条记录。解决方法是在点击事件中阻止默认行为：

<input type="email" id="email">
<input type="password" id="password">
<button id="loginBtn">登录</button>

const loginBtn = document.getElementById('loginBtn');

loginBtn.addEventListener('click', function(event) {
  // 阻止表单默认提交，避免页面刷新
  event.preventDefault();
  
  const email = document.getElementById('email').value;
  const password = document.getElementById('password').value;
  
  console.log('邮箱:', email);
  console.log('密码:', password);
  // 后续存入数据库的逻辑
});

3. 变量作用域或重复事件绑定问题 #

确保代码不存在变量覆盖或重复绑定事件的情况：

• 使用 let 或 const 在函数内部声明变量，避免全局变量污染
• 仅绑定一次点击事件（不要在循环、定时器等重复执行的代码块内绑定事件）

快速验证方法 #

连续在控制台手动输入 console.log('测试日志') 多次，观察是否所有日志都能显示，以此排除控制台设置问题；若按钮在表单内，点击后查看页面是否刷新，判断是否是默认提交行为导致的日志丢失。

内容的提问来源于stack exchange，提问作者IAmGoin'Crazy