如何解决表单提交时 console.log 不触发的问题？

在前端开发中，尤其是初学者使用原生 javaScript 处理表单时，常遇到「点击按钮后控制台无日志输出」的问题。这并非代码语法错误，而是由两个关键机制共同导致的：html 表单的默认提交行为 和 dom 元素选择器的误用。

? 根本原因分析

1. id=”Formulario” 绑定在

   上，而非

   元素
   原 HTML 中：

   而 javascript 中却尝试获取该 ID 并监听 submit 事件：

   const cadForm = document.getElementById('Formulario'); if (cadForm) {     cadForm.addEventListener("submit", ...); // ❌ div 不会触发 submit 事件 }

   ✅ 正确做法是将 id=”Formulario” 移至

   标签上：

   未调用 event.preventDefault()

   默认提交会触发行内 action=”#” 的跳转（即页面重载）。一旦页面刷新，所有尚未执行完的 js（包括 console.log）都会被中断，控制台自然看不到输出。
   ✅ 必须在事件处理函数中显式阻止默认行为：

   cadForm.addEventListener("submit", (e) => {     e.preventDefault(); // ✅ 关键：阻止页面刷新     console.log("Success"); // ✅ 现在能正常输出 });

✅ 完整修复示例

 
         Submit 

// 修复后的 JavaScript（含防刷新 + 可选 Swal 提示） const cadForm = document.getElementById('Formulario');  if (cadForm) {     cadForm.addEventListener("submit", (e) => {         e.preventDefault(); // ? 必须！阻止页面重载          console.log("✅ Form submitted successfully!"); // ✅ 控制台可见          // 示例：调用 Sweetalert2 弹窗（需确保库已正确加载）         // Swal.fire({         //     icon: 'success',         //     title: 'Cadastro realizado!',         //     text: 'Seus dados foram enviados com sucesso.'         // });     }); }

⚠️ 注意事项与最佳实践

• 避免命名冲突：示例中定义了名为 alert() 的函数，但 alert 是浏览器全局函数名，覆盖它可能导致意外行为。建议改用语义化名称，如 showRegistrationError()。
• 脚本加载时机：确保 JS 代码在 DOM 加载完成后执行。推荐将