带递增和重置按钮的计数器点击后自动复位问题求助

AI 小北

2026-8-21

问题解决：计数器点击后立刻复位（页面刷新）

问题根源

页面刷新导致计数器重置，本质是表单的默认提交行为被触发，页面重新加载后计数器回到初始值。

解决方案

提供三种可行方案，任选其一即可：

方案1：阻止表单默认提交行为

在<form>标签中添加onsubmit="return false;"，直接禁用表单的提交动作：

<span id="counter">0</span>
<form class="counter-btns" onsubmit="return false;">
    <button class="btn" id="increment-btn" type="button">Increment</button>
    <button class="btn" id="reset-btn" type="button">Reset</button>
</form>

方案2：移除不必要的form标签

如果不需要使用表单功能，直接将按钮放在<div>或其他容器中，避免触发表单提交：

<span id="counter">0</span>
<div class="counter-btns">
    <button class="btn" id="increment-btn" type="button">Increment</button>
    <button class="btn" id="reset-btn" type="button">Reset</button>
</div>

方案3：通过JavaScript阻止表单提交

在JS代码中添加表单的submit事件监听，调用preventDefault()阻止默认行为：

// 新增阻止表单提交的代码
document.querySelector('.counter-btns').addEventListener('submit', function(e) {
    e.preventDefault();
});

// 原有代码保持不变
const setCounter = (n) => document.getElementById("counter").innerHTML = n;
const resetCounter = () => setCounter(0);
const getCounterValue = () => parseInt(document.getElementById("counter").innerHTML);
const incrementCounter = () => setCounter(getCounterValue() + 1);

var incrementButton = document.getElementById("increment-btn");
var resetButton = document.getElementById("reset-btn");

incrementButton.onclick = () => incrementCounter();
resetButton.onclick = () => resetCounter();