So ändern Sie die Farbe: Verwenden Sie die Schaltflächen

Question

Kann ich in dieser Funktion weniger Codezeilen schreiben? Ich möchte, dass zwischen den beiden Farben gewechselt wird, wenn Sie eine der Tasten drücken. Die Funktion green() ist das genaue Gegenteil von red.

<code><h1 id="header">rot oder grün</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>