JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div style="text-align:center">
<h1> What music do you get?</h1>
<h2> Good Luck!</h2>
<p>
<img id="die" alt="die image"
src="die1.gif" />
</p>
<p>
<input type="button" value="Click to Roll" onclick="Roll();" />
</p>
</div>
</body>
JavaScript
// From Dave Reed
// Given : low <= high
// Returns : a random number in the range [low, high)
function Roll(low,high)
{
return Math.random()*(high-low) + low;
}
function RandomInt(low, high)
// Given : low <= high
// Returns : a random integer in the range [low, high]
{
return Math.floor(Math.random()*(high-low+1)) + low;
}
function RandomChar(str)
// Given : str is a nonempty string
// Returns: a random character from the string
{
return str.charAt(RandomInt(0, str.length-1));
}
function RandomOneOf(list)
// Given : list is a nonempty list (array)
// Returns: a random item from the list
{
return list[RandomInt(0, list.length-1)];
}
function Roll()
// Results: displays a randomly selected image of a 6-sided die
{
var roll;
roll = RandomInt(1, 6);
if (roll == 1) {
document.getElementById("die").src =
"die1.gif";
document.write("<center><p><a href='bad.html'> Enter </a></p></center>");
}
else if (roll == 2) {
document.getElementById("die").src =
"die2.gif";
document.write("<center><p><a href='good.html'> Enter </a></p></center>");
}
else if (roll == 3) {
document.getElementById("die").src =
"die3.gif";
document.write("<center><p><a href='bad.html'> Enter </a></p></center>");
}
else if (roll == 4) {
document.getElementById("die").src =
"die4.gif";
document.write("<center><p><a href='good.html'> Enter </a></p></center>");
}
else if (roll == 5) {
document.getElementById("die").src =
"die5.gif";
document.write("<center><p><a href='bad.html'> Enter </a></p></center>");
}
else {
document.getElementById("die").src =
"die6.gif";
document.write("<center><p><a href='good.html'> Enter </a></p></center>");
}
}