如何在JS中存储按钮计数值而非读取HTML实现点击计数变色

DevOps 小满

2026-10-2

代码修正方案

原有代码核心错误

计数数组v定义在点击事件回调函数内部，每次触发点击都会重置，无法持久存储每个按钮的计数值
仍在读取DOM的innerHTML获取计数值，不符合不读取HTML内容的要求
switch判断的对象v[ele.id]为存储计数的对象实例，和字符串"0"/"1"/"2"恒不等，所以始终走default分支
错误将按钮innerHTML设置为颜色名称，不符合显示计数值、修改按钮颜色的需求
没有实现计数值到3后重置为0的逻辑

修正后完整代码

HTML 部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="b1">0</button>
<button id="b2">0</button>
<button id="b3">0</button>

JS 部分

// 全局定义计数数组存储三个按钮的计数值，初始值均为0
const btnCounts = [0, 0, 0];
// 按钮id和数组下标的映射关系
const idMap = {
  'b1': 0,
  'b2': 1,
  'b3': 2
};

$("button").click(function () {
  buttonVal(this);
});

function buttonVal(ele) {
  // 仅从JS侧数组读取计数值，不读取HTML内容
  const idx = idMap[ele.id];
  let currentVal = btnCounts[idx];
  // 计数自增，到3后重置为0
  currentVal = currentVal >= 3 ? 0 : currentVal + 1;
  // 新值存回数组
  btnCounts[idx] = currentVal;

  // 按数值匹配对应样式，这里保留你要求的switch写法
  switch (currentVal) {
    case 0:
      ele.style.backgroundColor = 'red';
      break;
    case 1:
      ele.style.backgroundColor = 'blue';
      break;
    case 2:
      ele.style.backgroundColor = 'green';
      break;
    case 3:
      ele.style.backgroundColor = 'pink';
      break;
  }
  // 按钮显示当前计数值
  ele.innerHTML = currentVal;
}