表单提交后页面刷新导致 console.log 无法显示，根本原因是未阻止默认提交行为，且 html 中 id="formulario" 错误地绑定在 div 而非 form 元素上。本文将手把手教你修正 dom 选择器、添加 event.preventdefault()，并确保控制台日志与 sweetalert2 提示正常工作。
在 JavaScript 表单交互开发中，初学者常遇到“点击按钮后 console.log 没有输出”的问题——表面看代码逻辑完整，实则隐藏两个关键陷阱：DOM 元素定位错误 和 表单默认行为未拦截。
首先，检查你的 HTML 结构：
<form action="#" id="Formulario"> <!-- ✅ 正确：id 应作用于 <form> 标签 -->
<div class="form first">
<!-- ... 表单字段 ... -->
<button type="submit">Submit</button>
</div>
</form>而原代码中 id="Formulario" 实际写在了 <div class="form first" id="Formulario"> 内部——这意味着 document.getElementById('Formulario') 返回的是一个 <div>，而非 <form> 元素。由于 <div> 不支持 submit 事件，addEventListener("submit", ...) 实际绑定失败，整个事件监听器从未被触发，自然不会执行 console.log("Success")。
其次，即使正确绑定了 <form>，浏览器对 <button type="submit"> 的默认行为是提交表单并立即刷新页面。JavaScript 执行（包括 console.log）虽已开始，但页面刷新会中断当前执行上下文，清空控制台日志（尤其在 DevTools 未开启 “Preserve log” 时），造成“日志消失”的错觉。
✅ 正确解决方案包含两步：
-
修正 HTML：将 id="Formulario" 移至 <form> 标签
<form action="#" id="Formulario"> <!-- 关键修改 --> <!-- 其余结构保持不变 --> </form>
-
在事件处理函数中调用 e.preventDefault()
const cadForm = document.getElementById('Formulario'); if (cadForm) { cadForm.addEventListener("submit", (e) => { e.preventDefault(); // ? 阻止页面刷新，保留控制台输出 console.log("Success"); // 现在能稳定看到！ // 示例：结合验证逻辑调用 alert 函数（注意重命名避免覆盖 window.alert） // validateAndShowAlert(); }); }
⚠️ 额外重要提示：
-
避免使用 alert 作为函数名：原代码中 function alert(){...} 会覆盖全局 window.alert，不仅影响调试，还可能引发不可预知错误（如其他库调用 alert() 失败）。请重命名为更具语义的名称，例如 showVehicleNotFoundError：
function showVehicleNotFoundError() { Swal.fire({ icon: 'error', title: 'Ops..', text: 'Pelo visto a placa do veiculo não está cadastrada.', footer: '<a href="">Gostaria de cadastrar?</a>' }); } 确保 SweetAlert2 已正确加载：检查 <script> 标签顺序，sweetalert2.js 必须在自定义脚本之前引入，否则 Swal.fire 会报 ReferenceError。
最后，推荐在开发阶段启用浏览器 DevTools 的 “Preserve log” 选项（Console 面板右上角 ⋯ → “Preserve log”），这样即使页面刷新，之前的 console.log 输出也不会被清空，便于调试验证。
掌握这两个要点——精准选择表单元素 + 主动阻止默认行为——你就能稳定捕获日志、可靠触发弹窗，并为后续表单验证、异步提交（如 fetch）打下坚实基础。
