JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="on" id="d1" onclick="hold('d1');"></div>
<div class="on" id="d2" onclick="hold('d2');"></div>
<div class="on" id="d3" onclick="hold('d3');"></div>
<div class="on" id="d4" onclick="hold('d4');"></div>
<div class="on" id="d5" onclick="hold('d5');"></div>

<div class="roll" id="roll" onclick="roll();">Roll</div>

CSS

.on {border:1px solid #cccccc;display:inline-block;width:50px;height:50px;line-height:50px;text-align:center;}

.off {border:1px solid red;display:inline-block;width:50px;height:50px;line-height:50px;text-align:center;}

.roll {display:block;border:1px solid #cccccc;}

JavaScript

function roll() {

var dice1 = document.getElementById("d1").className;
var dice2 = document.getElementById("d2").className;
var dice3 = document.getElementById("d3").className;
var dice4 = document.getElementById("d4").className;
var dice5 = document.getElementById("d5").className;

if (dice1 == "on") {var d1 = rand();
document.getElementById("d1").innerHTML = d1;
}
if (dice2 == "on") {var d2 = rand();
document.getElementById("d2").innerHTML = d2;
}
if (dice3 == "on") {var d3 = rand();
document.getElementById("d3").innerHTML = d3;
}
if (dice4 == "on") {var d4 = rand();
document.getElementById("d4").innerHTML = d4;
}
if (dice5 == "on") {var d5 = rand();
document.getElementById("d5").innerHTML = d5;
}

}

function rand(x) {
var roll = Math.floor(Math.random() * 6) + 1;
return roll;
}

function hold(x) {
var hold = document.getElementById(x).className = "off";
return hold;
}