How to change color: use buttons
P粉111927962
2023-09-05 16:38:19
<p>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. </p>
<pre class="lang-html prettyprint-override"><code><h1 id="header">red or green</h1>
<button id="redButton" onclick="red()">red</button>
<button id="greenButton" onclick="green()">green</button>
</code></pre>
<pre class="brush:php;toolbar:false;">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"
}</pre></p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
// 缓存经常访问的元素 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; }