表单提交后页面刷新导致 console.log 无法显示，核心原因是未阻止默认提交行为，且 html 中 id 错误地绑定在 div 而非 form 元素上。本文将手把手教你定位并修复这两个关键问题。

在 JavaScript 表单交互开发中，新手常遇到“点击按钮无反应”或“console.log 没输出”的困惑——这往往并非代码逻辑错误，而是忽略了浏览器的默认表单行为和DOM 元素选择器匹配问题。以下为你系统梳理并解决该问题。

? 问题根源分析

1. ID 绑定位置错误
   原 HTML 中，id="Formulario" 被写在

   内部，而 JavaScript 使用 document.getElementById('Formulario') 查找的是该 div 元素。但事件监听需绑定在

   上（因为 submit 事件只在

   元素上原生触发）。当前 cadForm 实际指向一个普通 div，导致 addEventListener("submit", ...) 无效。

   未阻止默认提交行为
   

   

   财经HTML高端海报生成

   复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

   下载

   提交时会触发页面跳转（即使 action="#" 也会刷新当前页），导致 JavaScript 执行被中断，console.log("Success") 来不及输出即被页面重载覆盖。

✅ 正确修复步骤

✅ 第一步：修正 HTML —— 将 ID 移至

标签
<!-- ❌ 错误（ID 在 div 上） -->
<div class="form first" id="Formulario">...</div>

<!-- ✅ 正确（ID 在 form 上） -->
<form action="#" id="Formulario">
  <div class="form first">...</div>
</form>
✅ 第二步：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: '<a href="">Gostaria de cadastrar?</a>'
  });
}
? 重要提示：不要将函数命名为 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 事件仅在 上触发，div 不支持该事件
console.log 不显示	添加 e.preventDefault()	防止页面刷新中断 JS 执行流
函数命名风险	避免使用 alert、submit、form 等全局属性名	防止隐式覆盖原生 API，提升代码健壮性

掌握这两个基础要点，你就能稳稳掌控表单交互流程——从调试日志到集成 SweetAlert2 弹窗，再到后续的表单验证与 API 提交，都将变得清晰可控。