表单提交后页面刷新导致 console.log 无法显示，核心原因是未阻止默认提交行为，且 html 中 id 错误地绑定在 div 而非 form 元素上。本文将手把手教你定位并修复这两个关键问题。
在 JavaScript 表单交互开发中，新手常遇到“点击按钮无反应”或“console.log 没输出”的困惑——这往往并非代码逻辑错误，而是忽略了浏览器的默认表单行为和DOM 元素选择器匹配问题。以下为你系统梳理并解决该问题。
? 问题根源分析
-
ID 绑定位置错误
原 HTML 中，id="Formulario" 被写在内部，而 JavaScript 使用 document.getElementById('Formulario') 查找的是该 div 元素。但事件监听需绑定在✅ 第二步：JavaScript 中添加 e.preventDefault()
在事件回调中必须调用该方法，阻止表单默认提交行为，确保后续逻辑（如日志、弹窗、异步请求）能正常执行：
const cadForm = document.getElementById('Formulario'); if (cadForm) { cadForm.addEventListener("submit", (e) => { e.preventDefault(); // ? 关键！阻止页面刷新 console.log("Success"); // ✅ 现在能稳定输出到控制台 // 示例：调用自定义 alert 函数（注意：避免命名冲突） showVehicleAlert(); }); } // ⚠️ 避免使用 'alert' 作为函数名（与原生 window.alert 冲突） function showVehicleAlert() { Swal.fire({ icon: 'error', title: 'Ops..', text: 'Pelo visto a placa do veículo não está cadastrada.', footer: 'Gostaria de cadastrar?' }); }? 重要提示：不要将函数命名为 alert()，它会覆盖全局 window.alert，不仅可能引发意外行为，还易导致调试混乱。建议使用语义化名称如 showVehicleAlert() 或 handleRegistrationError()。
? 验证与调试技巧
- 打开浏览器开发者工具（F12 → Console），点击提交按钮，确认 "Success" 是否出现；
- 在 e.preventDefault() 后临时添加 console.dir(e.target)，检查事件目标是否为
- 使用 console.time("form-submit") / console.timeEnd("form-submit") 测量处理耗时；
- 若后续需真实提交数据，可在此处调用 fetch() 或 axios.post() 替代原生提交。
? 总结
问题点 修复方式 原因说明 ID 选择器失效 将 id="Formulario" 移至 submit 事件仅在 console.log 不显示 添加 e.preventDefault() 防止页面刷新中断 JS 执行流 函数命名风险 避免使用 alert、submit、form 等全局属性名 防止隐式覆盖原生 API，提升代码健壮性 掌握这两个基础要点，你就能稳稳掌控表单交互流程——从调试日志到集成 SweetAlert2 弹窗，再到后续的表单验证与 API 提交，都将变得清晰可控。
