HTML开发：如何实现可循环切换文本的多功能Button按钮

问题原因 #

你当前的代码逻辑是首次触发点击事件时，直接将按钮的onclick事件覆盖为仅执行恢复初始状态的函数，该函数运行后没有再更新事件绑定逻辑，所以第二次点击完成恢复后，后续点击都只会执行恢复逻辑，无法再次切换到修改后的状态。

修复方案 #

新增一个状态变量记录当前按钮的切换状态，单次事件函数内根据状态判断要执行的逻辑即可，不需要反复重写事件绑定：

// 定义状态变量，初始为false代表处于默认状态
let isToggled = false;
document.getElementById("button").onclick = function() {
  if (!isToggled) {
    // 切换为修改后状态
    document.getElementById("button_text").innerHTML = "Look, I did something!!!";
    this.innerHTML = "Go Back";
  } else {
    // 恢复初始状态
    document.getElementById("button_text").innerHTML = "Click Me. I'm a button!!!";
    this.innerHTML = "Click Me";
  }
  // 翻转状态值
  isToggled = !isToggled;
}

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