Best way to switch between two colours with javascript?

Question

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?

Answer 1

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>

Answer 2

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>

Answer 3

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>