如何修改代码实现点击按钮移除innerHTML，点击下一个时恢复前一个内容？

要实现点击新按钮时恢复上一个按钮的文本，核心是记录上一次被修改的按钮及其原始内容，每次点击新按钮时先恢复之前的，再处理当前的。以下是修改后的代码：

// 新增变量：记录上一个被修改的按钮和它的原始文本
let lastModifiedButton = null;
let lastOriginalText = '';

var drumButtons = document.querySelectorAll(".drum");

drumButtons.forEach(function(button, index){
  button.addEventListener("click", function(){  
    var audio = new Audio(audioFiles[index])
    audio.play()
    buttonAnimation(button.classList[0])
    // 调用修改后的wordChange，传入当前按钮元素
    wordChange(this)
  })
})

function wordChange(currentButton){
  // 1. 如果之前有被修改的按钮，先恢复它的原始文本
  if(lastModifiedButton){
    lastModifiedButton.innerHTML = lastOriginalText;
  }
  
  // 2. 保存当前按钮的原始文本和按钮元素
  lastOriginalText = currentButton.innerHTML;
  lastModifiedButton = currentButton;
  
  // 3. 清空当前按钮的文本
  currentButton.innerHTML = "";
}

关键改动说明： #

• 新增lastModifiedButton和lastOriginalText两个变量，用来追踪上一次被修改的按钮及其原始内容。
• 点击事件里调用wordChange时直接传入当前按钮元素（this），不用再通过类名查找，更高效。
• 在wordChange函数里，先判断是否有上一个按钮，有的话就把保存的原始文本赋值回去完成恢复；再记录当前按钮的信息，最后清空当前按钮文本。

这样每次点击新按钮时，都会自动把上一个被清空的按钮恢复成原来的文本，同时清空当前点击的按钮。

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