17370845950

在前端开发中，尤其是初学者使用原生 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 加载完成后执行。推荐将