JavaScript中按钮点击时switch语句每次仅触发case3如何解决

• 你用!btn[ele.id]作为初始化判断条件，而0是JS中的假值，当状态切换到0时，会被误判定为未初始化，直接重置为1，导致状态跳转逻辑异常
• 初始状态赋值为1，不符合你要求的0,1,2,3的循环起始要求
• 用数组存储字符串id对应的状态，会将id作为数组的自定义属性存储，不是标准的数组元素，存在潜在的读取异常风险

将状态存储改为普通对象，用精准的undefined判断做初始化，用取模运算简化循环逻辑，修改后代码如下：

JS代码 #

// 用普通对象存储各按钮的状态
const btnStatus = {};
function btnVal(ele) {
  // 仅当状态未初始化时赋值初始值-1，第一次加1后就是你要的起始状态0
  if (btnStatus[ele.id] === undefined) {
    btnStatus[ele.id] = -1;
  }
  // 取模4自动实现0→1→2→3→0的循环，逻辑更清晰不易出错
  btnStatus[ele.id] = (btnStatus[ele.id] + 1) % 4;
  switch(btnStatus[ele.id])
  {
    case 0:
      return {}; // 替换为状态0对应的返回内容
    case 1 :
      return {}; // 替换为状态1对应的返回内容
    case 2 :
      return {}; // 替换为状态2对应的返回内容
    case 3:
      return {}; // 替换为状态3对应的返回内容
    default:
      return {};
  }
}

HTML代码（补充正确的点击事件绑定） #

<button id = "button1" onclick="btnVal(this)"></button>

内容的提问来源于stack exchange，提问作者Davi