Would you like to learn how to dynamically alter a button's color upon clicking it and revert it back to its original color upon clicking it again?

Question

Would you like to learn how to dynamically alter a button's color upon clicking it and revert it back to its original color upon clicking it again?

My Upvote button starts off transparent, but when I click on it, the background color changes to green. What I need is for the button to become transparent again when clicked a second time. I've attempted using the following code snippet:

function changeColor(){
  var upVoteBtn = document.getElementById("upVote");
  if (upVoteBtn.style.backgroundColor === "transparent"){
    upVoteBtn.style.backgroundColor = "green";
    upVoteBtn.style.color = "black";
  } else {
    upVoteBtn.style.backgroundColor = "transparent";
  }
}

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

javascript html css spring-boot

Answer 1

Answer №1

Instead of directly applying styles in JavaScript, it's recommended to create a separate class with the necessary styles and then toggle this class using an event listener on button click, as @CBroe suggested.

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

.upvoted{
  background-color:green;
}

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

Answer 2

Instead of directly applying styles in JavaScript, it's recommended to create a separate class with the necessary styles and then toggle this class using an event listener on button click, as @CBroe suggested.

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

.upvoted{
  background-color:green;
}

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

Answer 3

Answer №2

Give this a try!

var toggleBtn = true;
var thumbsUpBtn = document.getElementById("thumbsUp");

function vote(){
    if (toggleBtn){
        thumbsUpBtn.style.backgroundColor = "green";
        toggleBtn = false;
    } else{
        thumbsUpBtn.style.backgroundColor = null;
        toggleBtn = true;
    }
}

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

If you want to make it see-through, then simply use

thumbsUpBtn.style.backgroundColor = "transparent";

instead of null. Just like below.

var toggleBtn = true;
var thumbsUpBtn = document.getElementById("thumbsUp");
thumbsUpBtn.style.backgroundColor = "transparent";

function vote(){
    if (toggleBtn){
        thumbsUpBtn.style.backgroundColor = "green";
        toggleBtn = false;
    } else{
        thumbsUpBtn.style.backgroundColor = "transparent";
        toggleBtn = true;
    }
}

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

Appreciate your time and best wishes!

Answer 4

Give this a try!

var toggleBtn = true;
var thumbsUpBtn = document.getElementById("thumbsUp");

function vote(){
    if (toggleBtn){
        thumbsUpBtn.style.backgroundColor = "green";
        toggleBtn = false;
    } else{
        thumbsUpBtn.style.backgroundColor = null;
        toggleBtn = true;
    }
}

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

If you want to make it see-through, then simply use

thumbsUpBtn.style.backgroundColor = "transparent";

instead of null. Just like below.

var toggleBtn = true;
var thumbsUpBtn = document.getElementById("thumbsUp");
thumbsUpBtn.style.backgroundColor = "transparent";

function vote(){
    if (toggleBtn){
        thumbsUpBtn.style.backgroundColor = "green";
        toggleBtn = false;
    } else{
        thumbsUpBtn.style.backgroundColor = "transparent";
        toggleBtn = true;
    }
}

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

Appreciate your time and best wishes!

Answer 5

Answer №3

 function castVote(button){
        button.classList.toggle("active");
}

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

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

Solution to the Problem

castVote(this) sends the element of the button
toggle() is used to add and remove the active class
.btn.active checks if the button has the active class or not

Answer 6

 function castVote(button){
        button.classList.toggle("active");
}

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

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

Solution to the Problem

castVote(this) sends the element of the button
toggle() is used to add and remove the active class
.btn.active checks if the button has the active class or not

Answer 7

Answer №4

To optimize the code, it is recommended for the original poster to utilize the Element.classList and its toggle method. Additionally, they should consider transitioning away from inline event handling and instead embrace using the selector API in conjunction 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>

Answer 8

To optimize the code, it is recommended for the original poster to utilize the Element.classList and its toggle method. Additionally, they should consider transitioning away from inline event handling and instead embrace using the selector API in conjunction 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>

Would you like to learn how to dynamically alter a button's color upon clicking it and revert it back to its original color upon clicking it again?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Creating a dynamic animation effect on a div with a changing number of child elements

Retrieving Progress Updates from a PHP Script Using XMLHttpRequest

`How can I trigger a JavaScript event when the content of an input field is modified?`

The last javascript file that was included has been overlooked

Challenges with pjax/ajax and handling the browser's back button

What is the best way to customize multiselection in jqgrid?

What is the best way to show instructions immediately upon receipt of a response?

Identifying and handling errors in the outer observable of an RXJS sequence to manage

Issue with JAWS screen reader failing to announce aria-expanded status

Python selenium issue: Element not found in the document using locator (//input[@type='file']')

Creating a horizontal scrolling section for mobile devices using CSS

Creating DOM elements upon successful completion of an AJAX request with jQuery has never been easier. Here's a

Warning: React detects a missing dependency within an interval in the effect

Is there a way for me to convert my (TypeScript Definition) .d.ts file into a (JavaScript) .js file?

The text in the image caption has been drastically reduced along with the size of the image

Manipulate a deeply nested JSON object in JavaScript by iterating through it and constructing a new data

What is the best way to make an image clickable in Next.Js?

Tips on getting the bot to react to a single "event" mentioned in the sentence, without multiple occurrences

Fill the list items with values from the given array

The command `grunt.option('force', true) isn't functioning properly