点击按钮后文字变“已发送”应优先用textcontent修改，同时设置disabled=true防止重复提交；需配合状态管理与加载态切换，并避免内联事件中this指向错误。
点击按钮后文字变“已发送”：基础实现
直接改 innerHTML 或 textContent 最快，但要注意别覆盖掉按钮里可能存在的子元素（比如图标）。优先用 textContent，更安全。
- 用
document.getElementById("btn").textContent = "已发送"是最稳妥的写法 - 如果按钮用了
innerHTML写了<span>发送</span>，那直接改innerHTML可能破坏结构，此时应定位到文本节点或用querySelector找容器 - 别在事件监听里反复绑定，容易点一次绑一次，导致多次触发
<button id="sendBtn">发送</button>
<script>
document.getElementById("sendBtn").addEventListener("click", function() {
this.textContent = "已发送";
});
</script>
防止重复点击：禁用按钮 + 状态标记
用户手快连点两次，“已发送”会闪一下又发请求，后端可能收到重复提交。光改文字不够，得配合禁用和状态控制。
- 必须加
this.disabled = true，否则按钮仍可点击 - 如果后续要恢复（比如发送失败），不能只靠文字还原，得用变量记录原始文案或从
data-*属性读取 - 恢复时记得同时设
this.disabled = false，否则按钮永远点不动
this.textContent = "已发送";
this.disabled = true;
// 后续可加 fetch.then(...).catch(() => {
// this.textContent = "发送";
// this.disabled = false;
// });
带加载态的过渡：文字 + loading 图标切换
纯文字变化太干，加个 loading 状态更符合用户预期。DOM 操作要小心，避免重复插入或残留。
- 推荐用
innerHTML配合模板字符串，但需确保按钮内容是纯文本或可控结构 - 更健壮的做法是提前在 HTML 里写好两套
<span></span>，用classList.toggle()控制显隐 - 如果用 SVG 或字体图标，注意设置
aria-hidden="true"，避免读屏软件误读
// 示例：用 innerHTML 切换（适合简单场景）
const btn = document.getElementById("sendBtn");
btn.innerHTML = '<span aria-hidden="true">●●●</span> 发送中...';
兼容旧浏览器或内联事件写法的问题
有人习惯在 HTML 里写 onclick="send()"，再在 JS 里操作 this，这在 IE8–9 里可能出问题：this 不指向按钮，而是 window。
- 绝对不要依赖内联
onclick里的this去改自身文字 - 如果必须用内联写法，显式传参：
onclick="handleSend(this)"，函数里用参数操作 - 更推荐统一用
addEventListener，现代框架也基本不碰内联事件
// ❌ 危险写法（IE 下 this 可能不是按钮）
<button onclick="this.textContent='已发送'">发送</button>
<p>// ✅ 安全写法
<button onclick="handleSend(this)">发送</button>
<script>
function handleSend(el) {
el.textContent = "已发送";
el.disabled = true;
}
</script></p>
真实项目里，按钮状态常要和请求生命周期强绑定，比如 loading → success → reset，这时候光改文字只是冰山一角；但只要记住：文字变更必须和 disabled、异步状态同步，否则用户一定会点穿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
