本文讲解如何使用 JavaScript 实现按钮点击时自动递增其 value 属性值，并确保计数状态在多次点击间正确保持。关键在于将计数变量声明在函数外部，避免每次调用重置，同时利用事件对象精准操作触发按钮。
本文讲解如何使用 javascript 实现按钮点击时自动递增其 `value` 属性值，并确保计数状态在多次点击间正确保持。关键在于将计数变量声明在函数外部，避免每次调用重置，同时利用事件对象精准操作触发按钮。
要让按钮每次点击都更新自身显示的数字（如从 0 → 1 → 2…），核心挑战在于维持状态：若将计数变量（如 click）定义在事件处理函数内部，每次点击都会重新初始化，导致无法累加。因此，必须将变量声明在全局作用域（或闭包内），使其生命周期跨越多次调用。
以下是推荐的实现方式：
<input onclick="change(event)" type="button" value="0" id="myButton1" />
<script>
// ✅ 正确：在函数外初始化计数器，读取初始 value 并转为整数
var click = parseInt(document.getElementById("myButton1").value, 10);
function change(e) {
e.preventDefault(); // 防止表单意外提交（若按钮位于 form 内）
click += 1; // 使用 += 简洁递增
e.currentTarget.value = click; // 直接更新被点击按钮的 value
}
</script>⚠️ 注意事项：
- parseInt(value, 10) 必须指定进制（10），避免字符串 "08" 被误解析为八进制（返回 0）；
- 使用 e.currentTarget 而非 document.getElementById(...)，确保代码可复用于多个按钮（只需复用 onclick="change(event)"）；
- 若页面含多个同类按钮且需独立计数，应改用每个按钮维护自己的状态（例如通过 data-count 属性或闭包封装），而非共享全局变量；
- 现代开发中更推荐使用 addEventListener 替代内联 onclick，提升可维护性与关注点分离：
const btn = document.getElementById("myButton1");
let count = parseInt(btn.value, 10);
btn.addEventListener("click", () => {
btn.value = ++count; // 前置递增，简洁赋值
});总结：状态持久化是交互逻辑的基础——变量生命周期决定行为逻辑。将计数器置于函数作用域之外，并结合事件对象精准操作 DOM，即可稳定实现“点击一次、值加一”的预期效果。
