JSFiddle - React, Tailwind, and code Playground

HTML

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<input id="clickMe" type="button" value="Start Disco" onclick="startDisco();" />
<input id="clickMe" type="button" value="Start Colours" onclick="startColours();" />

<script>var runningDisco = false;
var runningColours = false;


function startColours() {
  if (runningDisco == true) //Is disco running?
  {
    runningDisco = false; //If yes, stop it
  }
  runningColours = true; //Indicate we are running
  window.setTimeout(Colours, 100, 0); //Run
}

function startDisco() {
  if (runningColours == true) {
    runningColours = false;
  }
  runningDisco = true;
  window.setTimeout(Disco, 100);
}

function Disco() {
  if (runningDisco == true) {
    hex = "#";
    for (discoCount = 0; discoCount < 6; discoCount++) {
      hex = hex.concat((Math.floor(Math.random() * 17)).toString(16));
    }
    document.body.style.background = hex;
    window.setTimeout(Disco, 10);
  }

}

function Colours(colourCount) {
  if (runningColours == true) {
    if (colourCount > 359) {
      colourCount -= 359;
    }
    document.body.style.background = "hsl(" + colourCount + ", 50%, 50%)";
    window.setTimeout(Colours, 10, colourCount + 1);
  }

}</script>

CSS

input {
  font-family: 'Roboto', sans-serif;
  text-align: center;
  background-color: #dd1021;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}