如何使用多个按钮在单击时更改按钮颜色

<button id="btn1" style="background-color: red;">Button 1</button>
<button id="btn2" style="background-color: blue;">Button 2</button>
<button id="btn3" style="background-color: green;">Button 3</button>

// 获取按钮元素
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");

// 为按钮添加单击事件处理函数
btn1.addEventListener("click", function() {
  btn1.style.backgroundColor = "yellow";
});

btn2.addEventListener("click", function() {
  btn2.style.backgroundColor = "orange";
});

btn3.addEventListener("click", function() {
  btn3.style.backgroundColor = "purple";
});

button {
  width: 100px;
  height: 50px;
  color: white;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}