How to change a button's color when clicked on it and change it back to its original color when the button is clicked again?

Question

In this case, my Upvote button is transparent, and when I click on it, its background color changes from transparent to green. I need to make this button transparent when I click on it again. I tried the following codes

 function vote(){ var upVoteBtn = document.getElementById("upVote"); upVoteBtn.style.backgroundColor = "green"; upVoteBtn.style.color = "black"; }

 <button id="upVote" onclick=vote()>upVote</button>

Answer 1

As @CBroe mentioned, instead of adding style in js, consider making a class with styles you need, toggle this class with a listener on button click.

 document.getElementById("upVote").addEventListener("click", () => { event.target.classList.toggle("upvoted") })

 .upvoted{ background-color:green; }

 <button id="upVote">upVote</button>

Answer 2

Try this!

 var btnToggle = true; var upVoteBtn = document.getElementById("upVote"); function vote(){ if (btnToggle){ upVoteBtn.style.backgroundColor = "green"; btnToggle = false; } else{ upVoteBtn.style.backgroundColor = null; btnToggle = true; } }

 <button class="btn btn-outline-success" id="upVote" onclick=vote()>upVote</button>

If you want to make it transparent, then simply use upVoteBtn.style.backgroundColor = "transparent"; instead of null . Just like below.

 var btnToggle = true; var upVoteBtn = document.getElementById("upVote"); upVoteBtn.style.backgroundColor = "transparent"; function vote(){ if (btnToggle){ upVoteBtn.style.backgroundColor = "green"; btnToggle = false; } else{ upVoteBtn.style.backgroundColor = "transparent"; btnToggle = true; } }

 <button class="btn btn-outline-success" id="upVote" onclick=vote()>upVote</button>

Thanks and best regards!

Answer 3

 function vote(element){ element.classList.toggle("active"); }

 .btn.active{ background:green; color: #fff; } .btn{ background: transparent; color: black; }

 <button class="btn btn-outline-success" id="upVote" onclick=vote(this)>upVote</button>

---

Solution of Problem

• vote(this) send element of button
• toggle() use to add and remove active class
• .btn.active check button have active class or not

Answer 4

The OP should make use of the Element.classList 's toggle method. In addition the OP should feel encouraged to drop inline event handling in favor of using the selector API together with EventTarget.addEventListener .

 function toggleVotingState({ currentTarget }) { currentTarget.classList.toggle('voted'); } document .querySelector('#upVote') .addEventListener('click', toggleVotingState);

 .voted { color: black; background-color: green; }

 <button class="btn btn-outline-success" id="upVote">upVote</button>