How to change color: use buttons

Question

Is there a way for me to write fewer lines of code in this function? I want it to switch between the two colors when you press one of the buttons. The function green() is the exact opposite of red.

<code><h1 id="header">red or green</h1>
<button id="redButton" onclick="red()">red</button>
<button id="greenButton" onclick="green()">green</button>
</code>

function red() {
  document.getElementById("header").innerHTML = "red"
  document.getElementById('header').style.color = "red"
  document.getElementById('redButton').style.color = "white"
  document.getElementById('redButton').style.backgroundColor = "red"
  document.getElementById('greenButton').style.color = "black"
  document.getElementById('greenButton').style.backgroundColor = "grey"
}

Answer 1

// 缓存经常访问的元素
const headerElement = document.getElementById("header");
const redButton = document.getElementById("redButton");
const greenButton = document.getElementById("greenButton");

// 为整个文档添加事件监听器，利用事件委托
document.addEventListener("click", function(event) {
  const targetId = event.target.id;
  
  if (targetId === "redButton") {
    headerElement.innerHTML = "Red";
    headerElement.style.color = "red";
    redButton.classList.add("active-red");
    greenButton.classList.remove("active");
  } else if (targetId === "greenButton") {
    headerElement.innerHTML = "Green";
    headerElement.style.color = "green";
    greenButton.classList.add("active-green");
    redButton.classList.remove("active");
  }
});

.active {
  color: white;
}

.active-red {
  color: white;
  background-color: red;
}

.active-green {
  color: black;
  background-color: grey;
}

<h1 id="header">Red Or Green</h1>
<button id="redButton">Red</button>
<button id="greenButton">Green</button>