JSFiddle - React, Tailwind, and code Playground

HTML

<p>Try to click on the button until the cycle is not  is not completed.</p>

<div class="box">0</div>

<button id="control_1">Click on me</button>

<div id="debug"></div>

CSS

.box {
  display: flex;
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
  align-items: center;
  justify-content: center;
  font: 800 3rem Arial, sans-serif;
  background: #eee;
}

#debug {
  margin-top: 10px;
  font: 400 1rem monospace;
}

JavaScript

'use strict';

setTimeout(function() {
  const BTN_1 = document.getElementById('control_1'),
        DIV = document.getElementsByClassName('box')[0],
        DEBUG = document.getElementById('debug'),
        colors = ['#E91E63', '#2196F3', '#8BC34A', '#FFEB3B', '#795548'],
        lengthColorArray = colors.length;

  let colorIndex = 0;
  let clickCounts = 0;

  DEBUG.innerHTML = 'Program begins: ' + new Date().getSeconds();

  BTN_1.addEventListener('click', () => {
    const EVENT_TIME = new Date().getSeconds();

    colorIndex = (colorIndex + 1 >= lengthColorArray) ? 0 : ++colorIndex;
    clickCounts++;

    DIV.style.background = colors[colorIndex];
    DIV.textContent = clickCounts;

    debug.appendChild(document.createTextNode(EVENT_TIME + '\n'));
  });

  const TIMESTAMP = new Date().getTime() + 5000;
  while (new Date().getTime() < TIMESTAMP);

  DEBUG.innerHTML += '<br/>Program ends: ' + new Date().getSeconds() + '<br>Callbacks begins: ';
}, 0);