如何用JavaScript实现切换按钮后点击值持续累加而非重置？

DevOps 小满

2026-8-20

解决方案：实现切换按钮后累加点击值的功能

问题核心

当前代码切换按钮时会重置点击计数，导致每次切换后重新计算总和，无法实现在原有总和基础上累加当前按钮对应值的需求（预期序列：10→20→30→40→50→150→250）。

代码修改思路

替换计数变量：将记录点击次数的numberOfClicks改为存储累加总和的totalSum，初始值设为0。
保留累加状态：切换按钮时不再重置总和，仅更新当前选中的数值（需将ID字符串转为数字类型）。
修改累加逻辑：点击大按钮时，直接将当前选中值加到总和中，而非用点击次数乘以当前值。
修正HTML规范问题：原代码中多个元素使用重复的id="container"，违反HTML ID唯一性要求，改为class="container"。

修改后的完整代码

HTML（优化ID重复问题）

<div class="container">
    <button class="buttonbetbox" id="10" onclick="reply_click(this.id)"></button>
</div>
<div class="container">
    <button class="buttonbetbox1" id="100" onclick="reply_click(this.id)"></button>
</div>

<div class="container">
    <button class="buttoncrab" id="btncrab" onclick="multiplyCount()">
        <span id="demo"></span>
    </button>
</div>

JavaScript（核心逻辑修改）

// 存储累加的总和，初始为0
let totalSum = 0;
// 默认选中第一个按钮的值（10）
let currentlySelected = 10;

function reply_click(id) {
    // 将按钮ID转为数字类型
    currentlySelected = Number(id);
}

function multiplyCount() {
    // 累加当前选中的数值到总和
    totalSum += currentlySelected;
    // 更新页面显示的总和
    document.getElementById("demo").textContent = totalSum;
}