本文详解表单提交时页面意外刷新的根本原因，指出未阻止默认行为、DOM 方法调用错误及 innerHTML 误用三大常见问题，并提供可直接运行的修复方案。
本文详解表单提交时页面意外刷新的根本原因，指出未阻止默认行为、dom 方法调用错误及 `innerhtml` 误用三大常见问题，并提供可直接运行的修复方案。
在 Web 开发中，使用 <form></form> 元素配合 JavaScript 处理用户输入是基础操作，但一个看似微小的疏忽——比如忘记阻止表单默认提交行为——就会导致页面瞬间刷新、控制台报错一闪而过、逻辑无法执行等“神秘失效”现象。你遇到的正是典型场景：点击按钮后页面重载，console.log("test") 虽然执行了，但后续 DOM 操作因页面刷新而中断。
根本原因有三点：
-
表单默认提交行为未被阻止：
<button></button>在<form></form>内默认类型为submit，点击即触发表单提交；若<form></form>无action属性，浏览器会向当前 URL 发起 GET 请求，造成整页刷新； -
DOM 查询方法缺失
document.前缀：getElementById('lenom')是无效调用，正确写法是document.getElementById('lenom')，否则会抛出ReferenceError； -
innerHTML是属性而非方法：误写为body.innerHTML(...)会导致TypeError: body.innerHTML is not a function。
✅ 正确做法是：监听表单的 submit 事件（而非按钮的 click），调用 event.preventDefault() 阻止默认提交，并修正 DOM 操作语法：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
// 监听整个表单的提交事件，更语义化且兼容性更好
const formulaire = document.getElementById('formulaire');
formulaire.addEventListener('submit', (e) => {
e.preventDefault(); // ✅ 关键：阻止页面刷新
const baliseNom = document.getElementById('lenom'); // ✅ 补全 document.
const nom = baliseNom.value.trim();
if (!nom) {
alert('Veuillez entrer un nom valide.');
return;
}
const body = document.querySelector('body');
body.innerHTML = `<p>Test : ${nom}</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>`; // ✅ innerHTML 是赋值属性，非函数调用
});? 额外建议与注意事项：
- 不要将逻辑绑定到按钮
click上，因为用户可能通过回车键提交表单，submit事件能覆盖所有提交途径； - 使用
trim()清除首尾空格，提升数据健壮性； - 若需保留原有页面结构（如 header、main），避免用
innerHTML = ...全量替换body，推荐使用insertAdjacentHTML()或创建元素插入：const p = document.createElement('p'); p.textContent = `Test : ${nom}`; document.querySelector('main').appendChild(p); - 确保
<script></script>标签使用defer（如你已做）或置于
