JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<div class="wrapper"></div>
<button class="btn">Click me</button>

CSS

.wrapper {
  background:#320204 no-repeat center top;
  
  width: 300px;
  height: 300px;
}
.wrapper.bg_2 {
  background-color: green;
}
.wrapper.bg_3 {
  background-color: blue;
}

JavaScript

function addClass(el, className) {
  if (el.classList)
    el.classList.add(className)
  else if (!hasClass(el, className)) el.className += " " + className
}
function removeClass(el, classNameMask) {
  el.classList.remove(...[...el.classList].filter(n => n.indexOf(classNameMask) !== -1));
}


var btn = document.querySelector('.btn');
var wrapper = document.querySelector('.wrapper');
var counterShake = 1;

btn.addEventListener('click', function() {  
  if (counterShake >= 3) {
    return false;
  }
  counterShake += 1;
  removeClass(wrapper, 'bg_');
	addClass(wrapper, 'bg_' + counterShake);  
  
  
  return false;
}, false);