What is the best way to change CSS style for a button when clicked using JavaScript?

Question

What is the best way to change CSS style for a button when clicked using JavaScript?

Is there a way to switch the background style of a CSS div when clicking the same button?

function changeBg() {
  var divElem = document.getElementById("change-bg");
  if (divElem.style.backgroundColor === "yellow") {
    divElem.style.backgroundColor = "red";
  } else {
    divElem.style.backgroundColor = "yellow";
  }
}

body {
  margin: 0;
}

#change-bg {
  /* Extra Text Formatting */
  padding: 10px;
  text-align: center;
  /* Primary Background Color */
  background-color: yellow;
}

<div id="change-bg">
  <h3>
    Hello World
    <br/>
    <button onclick="changeBg();">Change Color</button>
  </h3>
</div>

Currently, it changes color to red. How can I make it revert back to its original color (yellow) when clicking the same button?

Feel free to explore the JSFiddle. I believe an If-Else statement could solve this issue. However, I am having trouble implementing it.

javascript html css

Answer 1

Answer №1

To switch the class name string and revert it back when the classList already contains it, you can utilize classList.toggle with the code snippet below:

const box = document.querySelector(".bg")
const btn = document.querySelector(".btn")

btn.addEventListener("click", () => {
  box.classList.toggle("blue")
})

.bg{
  background: red;
  width: 100px;
   height: 100px;
}

.blue{
  background: blue
}

<div class="bg"></div>
<button class="btn">Toggle it</button>

Answer 2

To switch the class name string and revert it back when the classList already contains it, you can utilize classList.toggle with the code snippet below:

const box = document.querySelector(".bg")
const btn = document.querySelector(".btn")

btn.addEventListener("click", () => {
  box.classList.toggle("blue")
})

.bg{
  background: red;
  width: 100px;
   height: 100px;
}

.blue{
  background: blue
}

<div class="bg"></div>
<button class="btn">Toggle it</button>

Answer 3

Answer №2

Try out this method exactly as presented!

function modifyBackground() {
  var targetElement = document.getElementById("modify-background");
  targetElement.classList.toggle("change-color");
}

body {
  margin: 0;
}

#modify-background {
  /* Additional Text Styling */
  padding: 10px;
  text-align: center;
  /* Default Background Color */
  background-color: yellow;
}
.change-color{
  background-color: red !important;
}

<!DOCTYPE html>

<head>
</head>

<body>
  <div id="modify-background">
    <h3>
      Hello World
      <br/>
      <button onclick="modifyBackground();">Change Color</button>
    </h3>
  </div>
</body>

</html>

Answer 4

Try out this method exactly as presented!

function modifyBackground() {
  var targetElement = document.getElementById("modify-background");
  targetElement.classList.toggle("change-color");
}

body {
  margin: 0;
}

#modify-background {
  /* Additional Text Styling */
  padding: 10px;
  text-align: center;
  /* Default Background Color */
  background-color: yellow;
}
.change-color{
  background-color: red !important;
}

<!DOCTYPE html>

<head>
</head>

<body>
  <div id="modify-background">
    <h3>
      Hello World
      <br/>
      <button onclick="modifyBackground();">Change Color</button>
    </h3>
  </div>
</body>

</html>

Answer 5

Answer №3

Here is an innovative approach using a toggle variable and the if-else method as suggested in the original post.

const backgroundDiv = document.getElementById("change-bg");
let toggleState = true;

function changeBackgroundColor() {
  backgroundDiv.style.backgroundColor = toggleState ? 'red' : 'yellow';
  toggleState = !toggleState;
}

body {
  margin: 0;
}

#change-bg {
  padding: 10px;
  text-align: center;
  background-color: yellow;
}

<div id="change-bg">
  <h3>
    Hello World
    <br/>
    <button onclick="changeBackgroundColor();">Change Color</button>
  </h3>
</div>

Answer 6

Here is an innovative approach using a toggle variable and the if-else method as suggested in the original post.

const backgroundDiv = document.getElementById("change-bg");
let toggleState = true;

function changeBackgroundColor() {
  backgroundDiv.style.backgroundColor = toggleState ? 'red' : 'yellow';
  toggleState = !toggleState;
}

body {
  margin: 0;
}

#change-bg {
  padding: 10px;
  text-align: center;
  background-color: yellow;
}

<div id="change-bg">
  <h3>
    Hello World
    <br/>
    <button onclick="changeBackgroundColor();">Change Color</button>
  </h3>
</div>

What is the best way to change CSS style for a button when clicked using JavaScript?

Answer №1

Answer №2

Answer №3

Similar questions

PHP variable inaccessible

Angular 2's Multi-select dropdown feature allows users to select multiple options

No matter how tall I make it, the scroll bar just won't stop showing

What is the process for updating a particular div element?

Tips for shifting a designated row upward in Chrome using JavaScript

Display/hide a div containing distinct content

jQuery live DataAttribute manipulation

Unable to trigger the show_popup function by clicking the button

Is there a way to determine if a table cell contains overflowing text compared to another cell?

What is the best way to eliminate the space following the image?

The upload directory fails to include the folder name when sending a file

Reveal the table only once a search has been completed

Even as I create fresh references, my JavaScript array object continues to overwrite previous objects

At times, the CSS fails to load at first and does not refresh correctly when using F5 or CTRL F5, yet it occasionally loads when clicking on links

Saving data in multiple collections using MongoDB and Node.js: A comprehensive guide

Stuck on loading screen with Angular 2 Testing App

Tips for updating the display by fetching data from a database through a websocket

How can we translate this php json_encode function into Node.js?

Filter jQuery search results for classes with identical names

JavaScript: Reorder an array to alternate between largest and smallest elements, starting with the largest