I have two buttons which the user can click on. The objective is for the user to be able to click on the buttons and have it change colour which I have accomplished. But the issue is I want the colour to go back to the original colour when they click the other button and vis versa. Here is the code I have.
<div id='rightAlign'>
<div id="but1">
<button id="button1">Click Me</button>
<button id="button2">Click Me</button>
</div>
</div>
<script>
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
button1.addEventListener("click", function() {
button1.style.backgroundColor = "red";
button2.addEventListener("click", function() {
button2.style.backgroundColor = "red";
});
You need to reset the other button
. Try the following:
var button1 = document.getElementById("button1"); var button2 = document.getElementById("button2"); var button1Default, button2Default; button1Default = button1.style.backgroundColor; button2Default = button2.style.backgroundColor; button1.addEventListener("click", function(){ button1.style.backgroundColor = "red"; button2.style.backgroundColor = button2Default; }); button2.addEventListener("click", function(){ button2.style.backgroundColor = "red"; button1.style.backgroundColor = button1Default; });
#button1,#button2 { padding: 15px 25px; font-size: 24px; text-align: center; cursor: pointer; outline: none; color: #fff; background-color: #4CAF50; border: none; border-radius: 15px; box-shadow: 0 9px #999; } #button1:hover {background-color: #3e8e41} #button1:active { box-shadow: 0 5px #666; transform: translateY(4px); }
<div id='rightAlign'> <div id="but1"> <button id="button1" onclick="">Click Me</button> <button id="button2">Click Me</button> </div> </div>
var button1 = document.getElementById("button1"); var button2 = document.getElementById("button2"); button1.addEventListener("click", function(){ button1.style.backgroundColor = "red" button2.style.backgroundColor = '' }) button2.addEventListener("click", function(){ button2.style.backgroundColor = "red" button1.style.backgroundColor = '' })
<div id='rightAlign'> <div id="but1"> <button id="button1">Click Me</button> <button id="button2">Click Me</button> </div> </div>
Is this what you are looking for?
var button1 = document.getElementById("button1"); var button2 = document.getElementById("button2"); button1.addEventListener("click", function(){ button1.style.backgroundColor = "red"; button2.style.backgroundColor = ""; }); button2.addEventListener("click", function(){ button2.style.backgroundColor = "red"; button1.style.backgroundColor = ""; });
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> </head> <body> <button id="button1">Click Me</button> <button id="button2">Click Me</button> </body> </html>
looking for?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.