更改一个按钮背景颜色onClick并将先前单击的按钮恢复为默认背景(8个按钮)

<button id="button1" style="background-color: #ffffff;">Button 1</button>
<button id="button2" style="background-color: #ffffff;">Button 2</button>
<button id="button3" style="background-color: #ffffff;">Button 3</button>
<button id="button4" style="background-color: #ffffff;">Button 4</button>
<button id="button5" style="background-color: #ffffff;">Button 5</button>
<button id="button6" style="background-color: #ffffff;">Button 6</button>
<button id="button7" style="background-color: #ffffff;">Button 7</button>
<button id="button8" style="background-color: #ffffff;">Button 8</button>

// 获取所有按钮元素
var buttons = document.querySelectorAll("button");

// 定义一个变量来保存先前单击的按钮
var previousButton = null;

// 遍历所有按钮，并为每个按钮添加点击事件处理程序
buttons.forEach(function(button) {
  button.addEventListener("click", function() {
    // 恢复先前单击的按钮的默认背景颜色
    if (previousButton !== null) {
      previousButton.style.backgroundColor = "#ffffff";
    }

    // 更改当前按钮的背景颜色
    this.style.backgroundColor = "#ff0000";

    // 更新先前单击的按钮为当前按钮
    previousButton = this;
  });
});