Hello,
I am taking a JavaScript class and I am currently on an assignment where my Professor wants me to create a dice roller program with the following stipulations:
* Users can choose via form how many sides that they can choose from, between 2 and 100.
* Dice are rolled '36000' times and totals are tracked.
* Actual totals and percentages are shown. ie.
2: 2341
3: 4486
4: 6626
5: 9166
6: 6636
7: 4480
8: 2265
2: 6.50%
3: 12.46%
4: 18.41%
5: 25.46%
6: 18.43%
7: 12.44%
8: 6.29%
Now to the problems. I have set up to where it will take the form, pass it to my "sidecheck" function, but I do not think it is passing it to the Die() function to roll the die. As far as the output part of it to show roll totals and percentages, I am lost on that one. Below is my code and what I have so far. Thank you for your help in advance.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lab05 - Dice Roller</title>
<script type="text/javascript" >
function sidecheck( ) {
if ( document.getElementById("sides").value < 2 || document.getElementById("sides").value > 100 ) {
alert( "Value you entered is not within range" );
} else if ( isNaN(document.getElementById("sides").value )) {
alert( "Value you entered is not within range" );
} else {
Die( sides );
}
return false;
}
function Die( sides ) {
this.sides = 6;
this.roll = function( ) {
return parseInt((Math.random( ) * 1000) % this.sides) + 1;
}
}
function field_prompt(field_name, prompt) {
var sides = document.getElementById( field_name );
sides.value = prompt;
sides.style.color = "#888";
sides.onfocus = function( ) {
this.style.color = "#000";
if ( this.value == prompt ){
this.value = "";
}
}
sides.onblur = function( ){
if( this.value == "" ){
this.style.color = "#888";
this.value = prompt;
}
}
}
window.onload = function( ) {
field_prompt( "sides", 12 );
}
</script>
</head>
<body>
<h1>Dice Roller</h1>
<hr />
Enter a number of sides for the die between 2 and 100.
<form action="" name="dice_roller" id="dice_roller" />
<p><input type="text" name="sides" id="sides" /></p>
<p><input type="submit" value="Click to roll the Die!" onclick="sidecheck( );" /></p>
</form>
<script type="text/javascript">
var d = new Die( );
d.sides = 12;
var rolled_value = d.roll( );
</script>
<table>
<tr>
<td><b>Rolled Times</b></td>
<td></td>
<td><b>Each Percentage Total</b></td>
</body>
</html>