本文详解表单点击后页面意外刷新的问题根源，指出未阻止默认行为、DOM 方法调用错误及 innerHTML 误用三大常见错误，并提供完整可运行的修复方案。
本文详解表单点击后页面意外刷新的问题根源，指出未阻止默认行为、dom 方法调用错误及 `innerhtml` 误用三大常见错误，并提供完整可运行的修复方案。
在 Web 开发中，使用 HTML 表单配合 JavaScript 处理用户输入时，一个高频陷阱是：点击按钮后页面瞬间刷新，控制台仅闪现错误便消失。这并非代码“无效果”，而是浏览器执行了表单的默认提交行为——<form></form> 元素在无 action 属性时会向当前 URL 发起 GET 请求，导致整页重载，所有 JS 执行中断、临时日志和错误信息被清空。
根本原因有三：
-
事件监听对象错误：你为
<button></button>绑定了onclick，但该按钮位于<form></form>内，点击会自动触发表单提交（即使按钮类型未显式声明为submit，在表单内默认即为提交按钮）。应改用监听form的submit事件，并调用event.preventDefault()阻止默认提交。 -
DOM 查询方法缺失
document.前缀：getElementById('lenom')是无效调用，正确写法是document.getElementById('lenom')。缺少前缀会导致ReferenceError，这正是控制台一闪而过的错误来源。 -
innerHTML误作函数调用：body.innerHTML(...)是语法错误；innerHTML是可读写的属性，应使用赋值语法：body.innerHTML = '...'。
✅ 正确实现如下（推荐写法，语义清晰、兼容性好）：
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', function(e) {
e.preventDefault(); // ✅ 关键：阻止页面刷新
const baliseNom = document.getElementById('lenom'); // ✅ 补全 document.
const nom = baliseNom.value.trim();
if (!nom) {
alert('Veuillez entrer un nom.');
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>`; // ✅ 赋值，非调用
});? 同时建议优化 HTML 结构：
- 为
<button></button>显式添加type="button"（若仅作 JS 触发）或type="submit"（若需语义化提交），避免歧义； - 确保
<input>标签闭合（如<input ...>），提升可维护性； - 将脚本置于
