Comment changer de couleur : utilisez les boutons

Question

Existe-t-il un moyen pour moi d'écrire moins de lignes de code dans cette fonction ? Je veux qu'il bascule entre les deux couleurs lorsque vous appuyez sur l'un des boutons. La fonction green() est exactement le contraire de rouge.

<code><h1 id="header">rouge ou vert</h1>
<id du bouton="redButton" onclick="red()">red</button>
<id du bouton="boutonvert" onclick="vert()">vert</bouton>
</code>

fonction rouge() {
  document.getElementById("header").innerHTML = "red"
  document.getElementById('header').style.color = "red"
  document.getElementById('redButton').style.color = "blanc"
  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>