JSFiddle - React, Tailwind, and code Playground
HTML
<button id="button1">Button 1</button>
<button id="button2">Button 2</button>
<button id="button3">Button 3</button>
CSS
button {
color: white;
font-size: 18px;
}
.red {
background-color: red;
}
.green {
background-color: #006633;
}
.blue {
background-color: blue;
}
JavaScript
function randomNumber() {
return parseInt(Math.random(1,10)*10);
}
function randomizeButtons(button1, button2, button3) {
// generate random number
var randomNum = randomNumber(1,3);
if( randomNum == 0 ) {
button1.className = "red";
} else if( randomNum == 1 ) {
button2.className = "blue";
} else if (randomNum == 2) {
button3.className = "green";
} else {
button1.className = "blue";
}
}
function randomButton() {
// get the buttons from the DOM
var redButton = document.getElementById("button1");
var greenButton = document.getElementById("button2");
var blueButton = document.getElementById("button3");
randomizeButtons(button1, button2, button3);
randomizeButtons(button1, button2, button3);
randomizeButtons(button1, button2, button3);
randomizeButtons(button1, button2, button3);
randomizeButtons(button1, button2, button3);
}
randomButton();