JS随机对错按钮点击后生命值图片连续删除、首次答错需点两次问题排查

问题原因 #

• 问题1根源：你在首次触发答错逻辑时，直接重写了button1的onclick事件，原来包含随机判断的原有点击逻辑被完全替换成了仅删除生命值图片的逻辑，所以后续所有点击都只会执行删图操作，不会再走随机判断。
• 问题2根源：首次触发答错分支的那次点击，仅完成了「重新绑定点击事件」的操作，并没有执行删图片的代码，必须等下一次点击才能触发你新绑定的删图逻辑，所以首次答错需要点两次才会删第一张图。

同时代码存在隐藏问题：imageToDelete变量定义在答错分支内部，每次重新绑定事件都会被重置为1，会出现反复删第一张图的逻辑错误。

修复方案 #

把记录待删除图片序号的变量放到全局作用域，不要在点击事件内部重写onclick绑定，答错时直接执行删图逻辑即可，修复后的JS代码如下：

var span1 = document.getElementById("count1");
var span2 = document.getElementById("count2");
// 全局记录待删除的图片序号
var imageToDelete = 1;

document.getElementById("button1").onclick = function() {
  // 生命值用完直接返回，不执行后续逻辑
  if (parseInt(span2.innerHTML) >=5) return;
  let btn1 = Math.floor(Math.random() * 2 + 1);
  if (btn1 == 1) {
    if (parseInt(span1.innerHTML) < 10) {
      span1.innerHTML = parseInt(span1.innerHTML) + 1;
    }
  } else {
    // 直接执行删图逻辑，不要重绑定点击事件
    document.getElementById("image_" + imageToDelete).style.visibility = "hidden";
    imageToDelete++;
    span2.innerHTML = parseInt(span2.innerHTML) + 1;
  }
}

HTML代码无需修改，替换原有JS逻辑即可解决全部问题。

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