CODEWITHSUNDEEP
javascriptcss
Simon Kiely
Simon Kiely

Reputation: 6040

Best way to switch between two colours with javascript?

Javascript beginner here. I essentially want to make a simple switch. If an element is black, change it to white. If it is white, change it to black.

function changeClass() {
    if (document.getElementById('myButton').style.backgroundColor == "white") {
        document.getElementById('myButton').style.backgroundColor = "black";
    } else {
        document.getElementById('myButton').style.backgroundColor = "white";
    }
}
<button class="normal" id="myButton" onclick='changeClass()' >Change Colour</button>

This code is quite messy though. Is there a better way to do this?

Upvotes: 5

Views: 2653

Answers (6)

syntax-punk
syntax-punk

Reputation: 4570

You can create some specific class in your css (say, .black class which contains a background-color: black; rule) and then attach/detach that class based on your condition.

Your DOM element (HTML tag) have a handy classList property, which can be treated as a list of classes attached to this DOM. I suggest to read a bit more about it here.

Overall, your function can be written like:

  const element = document.getElementById("coolDiv");
  element.classList.contains('black')) {
    element.classList.remove('black')
  } else {
    element.classList.add('black')
  }

or even a little more concise with a ternary operator

  const element = document.getElementById("coolDiv");
  element.classList.contains('black') ?
    element.classList.remove('black') : element.classList.add('black')

or just with a toggle function of the same classList property 

  const element = document.getElementById("coolDiv");
  element.classList.toggle('black')

Hope it helps! Cheers!

Upvotes: 2

Md. Abu Sayed
Md. Abu Sayed

Reputation: 2486

For this action not needed external javascript you can write simple inline javascript here the code:

.black-button { 
  background: black; 
  color: #fff; 
  outline: 0;
  padding: 20px;
}
button {
  transition: 0.3s;
  cursor: pointer;
}
<button class="normal" onclick="this.classList.toggle('black-button')">Change Colour</button>

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074028

Toggle a class:

function changeClass(){
  document.getElementById('myButton').classList.toggle("the-class");
}

where your CSS is:

.the-class {
    background-color: black;
}

...assuming the element's normal background color is white.

More about classList here. Support is good, but you may need a polyfill in older environments.

Example:

function changeClass() {
  document.getElementById('myButton').classList.toggle("the-class");
}
.the-class {
  background-color: black;
}
<button class="normal" id="myButton" onclick='changeClass()'>Change Colour</button>

Upvotes: 6

MauriceNino
MauriceNino

Reputation: 6747

Use something like classList.toggle()

function switchColor(){
  document.getElementById("resultDiv").classList.toggle("toggle")
}
.element {
  height: 100px;
  width: 100px;
  background-color: red;
}

.element.toggle{
  background-color: blue !important;
}
<button onclick="switchColor()">Click me</button>
<div id="resultDiv" class="element toggle"></div>

Upvotes: 2

CodeRonin
CodeRonin

Reputation: 2099

and if white it's not the defualt color you can refactor using ? operator:

let btn = document.getElementById('myButton');
btn.style.backgroundColor = btn.style.backgroundColor === 'white' ? 'black' : 'white';

Upvotes: 1

Maheer Ali
Maheer Ali

Reputation: 36564

You can use classList.toggle()

document.querySelector('#myButton').addEventListener('click',e => {
  e.target.classList.toggle('black')

})
.black{
  background:black
}
<button class="normal" id="myButton">Change Colour</button>

Upvotes: 4

Related Questions