Toggle button color with addEventListener

Question

I'm trying to learn the vanilla JS way of toggling a button color with addEventListener. I'm having some trouble understanding how to switch the button back to the original color. Here is my code:

HTML

<h1>Hello</h1>
<section id="container"></section>

CSS

h1 {
font-family: sans;
}
#container {
padding: 2em;
background-color: tomato;
}

#container2 {
padding: 2em;
background-color: blue;
}

JS

var el = document.getElementById('container');
el.addEventListener('click', function() {
this.style.backgroundColor = 'blue';
});

jsbin

Answer 1

You can restore the declared CSS style by clearing the background color, like this:

this.style.backgroundColor = '';

Fiddle at http://jsfiddle.net/xza5bt0q/

Click the box to toggle the color.

Answer 2

You could check if a color is set and remove it otherwise:

el.addEventListener('click', function() {
    if (this.style.backgroundColor == 'blue') {
        this.style.backgroundColor = null;
    } else {
        this.style.backgroundColor = 'blue';
    }
});

Answer 3

Try like the given code snippet here

HTML

 <div id="toggleArea" class='active'> Toggle area see in class name </div>
 <button id="btnToggle"> Toggle Button </button>

JavaScript

const toggleArea = document.getElementById('toggleArea')
const btnToggle = document.getElementById('btnToggle')

btnToggle.addEventListener('click', function() {
  if (toggleArea.classList.contains('active')) {
    toggleArea.classList.remove("active");
    toggleArea.classList.add("disable");
  } else {
    toggleArea.classList.remove("disable");
    toggleArea.classList.add("active");
  }
  toggleArea.innerHTML =  toggleArea.classList[0]
})

Answer 4

I would recommend toggling a CSS class when clicking. Then you can use the class to control color and other properties.

CSS

.container-active {
    background-color: blue;
}

JS

var ACTIVE_CLASS = 'container-active'; // define a css class 'constant'

var el = document.getElementById('container');
el.addEventListener('click', function () {
    var classes,
        idx;

    // simplest case: class name is empty
    if (this.className === '') {
        this.className = ACTIVE_CLASS;
        return;
    }

    // next: class name matches active
    if (this.className === ACTIVE_CLASS) {
        this.className = '';
        return;
    }

    // otherwise, if more complex, parse and modify classes
    classes = this.className.split(' ');
    idx = classes.indexOf(activeClass);
    if (idx === -1) {
        classes.push(activeClass);
    } else {
        classes.splice(idx, 1);
    }
    this.className = classes.join(' ');
});

Answer 5

Try the following codes: HTML, CSS, and Javascript.

In this code, the default color of the button is set to be blue. Once you click the button, it changes the background-color to red. If you click it again, the background-color changes to the default ie blue.

HTML

<button id="button" class="blueColor" onclick="toggle()">GET STARTED</button>

CSS

#button{
color: white;
width: 175px;
height: 50px;
border-radius: 5px;
font-family: arial;
font-weight: bold;
word-spacing: 3px;
border: none;
outline: none;
}

.blueColor{
background: blue;
}

.redColor{
background: red;
}

Javascript

<script>
function toggle(){
    var colorofbutton = document.querySelector("#button");

if(document.getElementsByClassName("blueColor")[0])
    {
        colorofbutton.classList.remove('blueColor');
        colorofbutton.classList.add('redColor');

    }
else
    {
    colorofbutton.classList.remove('redColor');
    colorofbutton.classList.add('blueColor');
    }
}
</script>