click toggles class

no jQuery

by Fiddel

HTML

<div id="container" class="test1" >

test

</div>

CSS

#container {
  padding:1rem;
  background:lime;
}
#container.test1 {
  background:blue;
}
#container.test2 {
  color:#fff
}

JavaScript

function test(){
      this.classList.toggle('test1');
      this.classList.toggle('test2');
    }
//document.querySelector('#container').addEventListener('mouseenter', test )
//document.querySelector('#container').addEventListener('mouseleave', test )
//document.getElementById('container').addEventListener('click', test )

document.querySelector('.test1').addEventListener('click', test )