PDA

Click to See Complete Forum and Search --> : Two dice

neil9999
08-17-2003, 02:11 PM
Hi,

I'm working on two javascript die, which look like two die but don't use any images. My script currently picks two random numbers between 1 and 6, and displays them as text. At the bottom of the page are two die, one which displays 5 and the other displays 0. The way this works is because each dice is a 3x3 table, and each cell (except for the top and bottom middle ones) contains a button. The font for these buttons is wingdings, so if the value of one is 'l' then it displays a dot. This way all numbers 1-6 can be displayed on the dice.

The name of the function which picks the random numbers is 'getRandomNum()'. How can I get the right combination of dots to be displayed according to the random number?

Just in case you can't see the attatchment, here's the code:


<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function getRandomNum() {
return (Math.floor(Math.random() * (1 - 7)) + 7);
}
// End -->
</script>


</head>

<body>

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
document.write("Your numbers:<p>");
document.write(getRandomNum());
document.write("<p>");
document.write(getRandomNum());
// End -->
</script>
<p><button onclick='window.location="dice2.htm";'>Roll again</button>
<p>
<p>
<p>
<p>&nbsp;
<p>&nbsp;
<table border="1" bordercolorlight="#FF0000" cellspacing="0" cellpadding="0" bordercolordark="#FF0000" bordercolor="#FF0000" width="120" height="120" bgcolor="#FF0000">
<tr>
<td><input type="button" name="ftl" style="font-family: Wingdings; background-color: #FF0000; border-style: solid; border-color: #FF0000">
</td>
<td>&nbsp;</td>
<td><input type="button" name="ftr" style="font-family: Wingdings; background-color: #FF0000; border-style: solid; border-color: #FF0000">
</td>
</tr>
<tr>
<td><input type="button" name="fml" style="font-family: Wingdings; background-color: #FF0000; border-style: solid; border-color: #FF0000">
</td>
<td><input type="button" name="fmm" style="font-family: Wingdings; background-color: #FF0000; border-style: solid; border-color: #FF0000">
</td>
<td><input type="button" name="fmr" style="font-family: Wingdings; background-color: #FF0000; border-style: solid; border-color: #FF0000">
</td>
</tr>
<tr>
<td><input type="button" name="fbl" style="font-family: Wingdings; background-color: #FF0000; border-style: solid; border-color: #FF0000">
</td>
<td>&nbsp;</td>
<td><input type="button" name="fbr" style="font-family: Wingdings; background-color: #FF0000; border-style: solid; border-color: #FF0000">
</td>
</tr>
</table>
<p>&nbsp;
<table border="1" bordercolorlight="#FF0000" cellspacing="0" cellpadding="0" bordercolordark="#FF0000" bordercolor="#FF0000" width="120" height="120" bgcolor="#FF0000">
<tr>
<td><input type="button" name="ftl" style="font-family: Wingdings; background-color: #FF0000; border-style: solid; border-color: #FF0000" value="l">
</td>
<td>&nbsp;</td>
<td><input type="button" name="ftr" style="font-family: Wingdings; background-color: #FF0000; border-style: solid; border-color: #FF0000" value="l">
</td>
</tr>
<tr>
<td><input type="button" name="fml" style="font-family: Wingdings; background-color: #FF0000; border-style: solid; border-color: #FF0000">
</td>
<td><input type="button" name="fmm" style="font-family: Wingdings; background-color: #FF0000; border-style: solid; border-color: #FF0000" value="l">
</td>
<td><input type="button" name="fmr" style="font-family: Wingdings; background-color: #FF0000; border-style: solid; border-color: #FF0000">
</td>
</tr>
<tr>
<td><input type="button" name="fbl" style="font-family: Wingdings; background-color: #FF0000; border-style: solid; border-color: #FF0000" value="l">
</td>
<td>&nbsp;</td>
<td><input type="button" name="fbr" style="font-family: Wingdings; background-color: #FF0000; border-style: solid; border-color: #FF0000" value="l">
</td>
</tr>
</table>
</body>

</html>



Hope you know what I mean. Thanks,

Neil
pyro
08-17-2003, 03:28 PM
I would use a different approach. I'd make 6 images, one for each side of the die. Then, you can just display the image needed...
neil9999
08-17-2003, 03:49 PM
There's loads of scripts like that already. I'd like to make mine look like a dice, but without using images.

Thanks,

Neil
Ice3T
08-17-2003, 04:28 PM
You could do something like this.
But since you use button's you would togle their visibility hidden/visible to show or hide the dots.

<html>
<body>


<style>
.c0{background-color:white;}
.c1{background-color:black;}
</style>





<form>
<input id=va type=text value="" onKeyUp=func01(),this.select()>
</form>



<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="16%" id="AutoNumber1">
<tr>
<td width="33%" class=c0 id=a1>a</td>
<td width="33%" class=c0>-</td>
<td width="34%" class=c0 id=a5>e</td>
</tr>
<tr>
<td width="33%" class=c0 id=a2>b</td>
<td width="33%" class=c0 id=a4>d</td>
<td width="34%" class=c0 id=a6>f</td>
</tr>
<tr>
<td width="33%" class=c0 id=a3>c</td>
<td width="33%" class=c0>-</td>
<td width="34%" class=c0 id=a7>g</td>
</tr>
</table>


<script language=javascript>

function func01(){
die1=document.getElementById('va').value;

for(i=1; i<8; i++){document.getElementById('a'+i).className='c0';}

if(die1==4 || die1==5 || die1==6){document.getElementById('a1').className='c1';}
if(die1==6){document.getElementById('a2').className='c1';}
if(die1==2 || die1==3 || die1==4 || die1==5 || die1==6){document.getElementById('a3').className='c1';}
if(die1==1 || die1==3 || die1==5){document.getElementById('a4').className='c1';}
if(die1==2 || die1==3 || die1==4 || die1==5 || die1==6){document.getElementById('a5').className='c1';}
if(die1==6){document.getElementById('a6').className='c1';}
if(die1==4 || die1==5 || die1==6){document.getElementById('a7').className='c1';}
}





</script>

</body>
</html>
neil9999
08-18-2003, 03:55 AM
Thanks alot, that works, but I can't get the random number inside the textbox for the dice to work. What's wrong with this script?


<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 2</title>
<style>
.c0{background-color:red;}
.c1{background-color:black;}
</style>

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function getRandomNum() {
return (Math.floor(Math.random() * (1 - 7)) + 7);
}
// End -->
</script>
<script LANGUAGE="JavaScript">

<!--- hide from old browsers --->

function jumpBox(list) {
location.href = list.options[list.selectedIndex].value
}

//created by Neil

function compute(form) {

form.randomnumber.value = ("getRandomNum()");

}

{
}

{

}

<!-- done hiding from old browsers -->
</script>

</head>

<body onload="compute(this.form)">





<form>
<input id=va type=text onKeyUp=func01(),this.select() size="20" name="randomnumber">
</form>



<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#FF0000" width="100" id="AutoNumber1" height="100" bgcolor="#FF0000" bordercolorlight="#FF0000" bordercolordark="#FF0000">
<tr>
<td width="20%" class=c0 id=a1 height="20%">&nbsp;</td>
<td width="20%" class=c0 id=a1 height="20%">&nbsp;</td>
<td width="20%" class=c0 height="20%">&nbsp;</td>
<td width="20%" class=c0 height="20%">&nbsp;</td>
<td width="20%" class=c0 id=a5 height="20%">&nbsp;</td>
</tr>
<tr>
<td width="20%" class=c0 id=a1 height="20%">&nbsp;</td>
<td width="20%" class=c0 id=a1 height="20%">&nbsp;</td>
<td width="20%" class=c0 height="20%">&nbsp;</td>
<td width="20%" class=c0 height="20%">&nbsp;</td>
<td width="20%" class=c0 id=a5 height="20%">&nbsp;</td>
</tr>
<tr>
<td width="20%" class=c0 id=a2 height="20%">&nbsp;</td>
<td width="20%" class=c0 id=a2 height="20%">&nbsp;</td>
<td width="20%" class=c0 id=a4 height="20%">&nbsp;</td>
<td width="20%" class=c0 id=a4 height="20%">&nbsp;</td>
<td width="20%" class=c0 id=a6 height="20%">&nbsp;</td>
</tr>
<tr>
<td width="20%" class=c0 id=a2 height="20%">&nbsp;</td>
<td width="20%" class=c0 id=a2 height="20%">&nbsp;</td>
<td width="20%" class=c0 id=a4 height="20%">&nbsp;</td>
<td width="20%" class=c0 id=a4 height="20%">&nbsp;</td>
<td width="20%" class=c0 id=a6 height="20%">&nbsp;</td>
</tr>
<tr>
<td width="20%" class=c0 id=a3 height="20%">&nbsp;</td>
<td width="20%" class=c0 id=a3 height="20%">&nbsp;</td>
<td width="20%" class=c0 height="20%">&nbsp;</td>
<td width="20%" class=c0 height="20%">&nbsp;</td>
<td width="20%" class=c0 id=a7 height="20%">&nbsp;</td>
</tr>
</table>


<script language=javascript>

function func01(){
die1=document.getElementById('va').value;

for(i=1; i<8; i++){document.getElementById('a'+i).className='c0';}

if(die1==4 || die1==5 || die1==6){document.getElementById('a1').className='c1';}
if(die1==6){document.getElementById('a2').className='c1';}
if(die1==2 || die1==3 || die1==4 || die1==5 || die1==6){document.getElementById('a3').className='c1';}
if(die1==1 || die1==3 || die1==5){document.getElementById('a4').className='c1';}
if(die1==2 || die1==3 || die1==4 || die1==5 || die1==6){document.getElementById('a5').className='c1';}
if(die1==6){document.getElementById('a6').className='c1';}
if(die1==4 || die1==5 || die1==6){document.getElementById('a7').className='c1';}
}





</script> <p>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
document.write("Your numbers:<p>");
document.write(getRandomNum());
document.write("<p>");
document.write(getRandomNum());
// End -->
</script>


</body>

</html>



Thanks again,

Neil
neil9999
08-18-2003, 01:03 PM
Or could I make the random number a variable?

Thanks,

Neil
neil9999
08-18-2003, 03:57 PM
Hi,

I've got the random number in the textbox now, but the number doesn't show up on the dice. The random number appears when you click on the textbox.

Here's the code:


<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 2</title>
<style>
.c0{background-color:red;}
.c1{background-color:black;}
</style>

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function getRandomNum() {
return (Math.floor(Math.random() * (1 - 7)) + 7);
}
// End -->
</script>

</head>

<body>





<form>
<input id=va type=text onKeyUp=func01(),this.select() size="20" name="randomnumber" onclick='randomnumber.value=getRandomNum()'>
</form>



<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#FF0000" width="100" id="AutoNumber1" height="100" bgcolor="#FF0000" bordercolorlight="#FF0000" bordercolordark="#FF0000">
<tr>
<td width="20%" class=c0 id=a1 height="20%">&nbsp;</td>
<td width="20%" class=c0 id=a1 height="20%">&nbsp;</td>
<td width="20%" class=c0 height="20%">&nbsp;</td>
<td width="20%" class=c0 height="20%">&nbsp;</td>
<td width="20%" class=c0 id=a5 height="20%">&nbsp;</td>
</tr>
<tr>
<td width="20%" class=c0 id=a1 height="20%">&nbsp;</td>
<td width="20%" class=c0 id=a1 height="20%">&nbsp;</td>
<td width="20%" class=c0 height="20%">&nbsp;</td>
<td width="20%" class=c0 height="20%">&nbsp;</td>
<td width="20%" class=c0 id=a5 height="20%">&nbsp;</td>
</tr>
<tr>
<td width="20%" class=c0 id=a2 height="20%">&nbsp;</td>
<td width="20%" class=c0 id=a2 height="20%">&nbsp;</td>
<td width="20%" class=c0 id=a4 height="20%">&nbsp;</td>
<td width="20%" class=c0 id=a4 height="20%">&nbsp;</td>
<td width="20%" class=c0 id=a6 height="20%">&nbsp;</td>
</tr>
<tr>
<td width="20%" class=c0 id=a2 height="20%">&nbsp;</td>
<td width="20%" class=c0 id=a2 height="20%">&nbsp;</td>
<td width="20%" class=c0 id=a4 height="20%">&nbsp;</td>
<td width="20%" class=c0 id=a4 height="20%">&nbsp;</td>
<td width="20%" class=c0 id=a6 height="20%">&nbsp;</td>
</tr>
<tr>
<td width="20%" class=c0 id=a3 height="20%">&nbsp;</td>
<td width="20%" class=c0 id=a3 height="20%">&nbsp;</td>
<td width="20%" class=c0 height="20%">&nbsp;</td>
<td width="20%" class=c0 height="20%">&nbsp;</td>
<td width="20%" class=c0 id=a7 height="20%">&nbsp;</td>
</tr>
</table>


<script language=javascript>

function func01(){
die1=document.getElementById('va').value;

for(i=1; i<8; i++){document.getElementById('a'+i).className='c0';}
if(die1==4 || die1==5 || die1==6){document.getElementById('a1').className='c1';}
if(die1==6){document.getElementById('a2').className='c1';}
if(die1==2 || die1==3 || die1==4 || die1==5 || die1==6){document.getElementById('a3').className='c1';}
if(die1==1 || die1==3 || die1==5){document.getElementById('a4').className='c1';}
if(die1==2 || die1==3 || die1==4 || die1==5 || die1==6){document.getElementById('a5').className='c1';}
if(die1==6){document.getElementById('a6').className='c1';}
if(die1==4 || die1==5 || die1==6){document.getElementById('a7').className='c1';}
}





</script> <p>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
document.write("Your numbers:<p>");
document.write(getRandomNum());
document.write("<p>");
document.write(getRandomNum());
// End -->
</script>
<p>
</body>

</html>


Please could you tell me how to make the random number in the textbox appear on the dice?

Thanks,

Neil.
Ice3T
08-18-2003, 10:07 PM
The text box is not necessary it was just a way to allow you to chose your number here is how it would look like using a random number. (I put two dices in this example so it would look more like what you are doing):

<html>
<body onKeyUp=func01()>

<style>
.c0{background-color:white;}
.c1{background-color:black;}
</style>

<br>
<table border="1" cellpadding="5" cellspacing="20" style="border-collapse: collapse" bordercolor="#111111" style=width:200;height:200 id="AutoNumber1">
<tr>
<td width="33%" class=c0 id=a1>&nbsp;</td>
<td width="33%" class=c0>&nbsp;</td>
<td width="34%" class=c0 id=a5>&nbsp;</td>
</tr>
<tr>
<td width="33%" class=c0 id=a2>&nbsp;</td>
<td width="33%" class=c0 id=a4>&nbsp;</td>
<td width="34%" class=c0 id=a6>&nbsp;</td>
</tr>
<tr>
<td width="33%" class=c0 id=a3>&nbsp;</td>
<td width="33%" class=c0>&nbsp;</td>
<td width="34%" class=c0 id=a7>&nbsp;</td>
</tr>
</table>
<br>
<table border="1" cellpadding="5" cellspacing="20" style="border-collapse: collapse" bordercolor="#111111" style=width:200;height:200 id="AutoNumber1">
<tr>
<td width="33%" class=c0 id=b1>&nbsp;</td>
<td width="33%" class=c0>&nbsp;</td>
<td width="34%" class=c0 id=b5>&nbsp;</td>
</tr>
<tr>
<td width="33%" class=c0 id=b2>&nbsp;</td>
<td width="33%" class=c0 id=b4>&nbsp;</td>
<td width="34%" class=c0 id=b6>&nbsp;</td>
</tr>
<tr>
<td width="33%" class=c0 id=b3>&nbsp;</td>
<td width="33%" class=c0>&nbsp;</td>
<td width="34%" class=c0 id=b7>&nbsp;</td>
</tr>
</table>

<script language=javascript>

function func01(){
die1=(Math.floor(Math.random() * (1 - 7)) + 7);
die2=(Math.floor(Math.random() * (1 - 7)) + 7);

for(i=1; i<8; i++){document.getElementById('a'+i).className='c0';document.getElementById('b'+i).className='c0';}

if(die1==4 || die1==5 || die1==6){document.getElementById('a1').className='c1';}
if(die1==6){document.getElementById('a2').className='c1';}
if(die1==2 || die1==3 || die1==4 || die1==5 || die1==6){document.getElementById('a3').className='c1';}
if(die1==1 || die1==3 || die1==5){document.getElementById('a4').className='c1';}
if(die1==2 || die1==3 || die1==4 || die1==5 || die1==6){document.getElementById('a5').className='c1';}
if(die1==6){document.getElementById('a6').className='c1';}
if(die1==4 || die1==5 || die1==6){document.getElementById('a7').className='c1';}

if(die2==4 || die2==5 || die2==6){document.getElementById('b1').className='c1';}
if(die2==6){document.getElementById('b2').className='c1';}
if(die2==2 || die2==3 || die2==4 || die2==5 || die2==6){document.getElementById('b3').className='c1';}
if(die2==1 || die2==3 || die2==5){document.getElementById('b4').className='c1';}
if(die2==2 || die2==3 || die2==4 || die2==5 || die2==6){document.getElementById('b5').className='c1';}
if(die2==6){document.getElementById('b6').className='c1';}
if(die2==4 || die2==5 || die2==6){document.getElementById('b7').className='c1';}
}





</script>

</body>
</html>


Just press a key to simulate the dice throw.
neil9999
08-19-2003, 07:13 AM
Hi Ice3t,

Thanks I've made that work perfectly now with the following code:


<html>

<head>
<style>
.c0{background-color:white;}
.c1{background-color:black;}
</style>

<title></title>

</head>

<body bgcolor="#FF0000" onload=func01()>
<table border="0" cellpadding="0" cellspacing="0" bordercolor="#111111" id="AutoNumber1" width="50" height="50">
<tr>
<td class=c0 id=a1></td>
<td class=c0 id=a1></td>
<td class=c0></td>
<td class=c0></td>
<td class=c0 id=a5></td>
</tr>
<tr>
<td class=c0 id=a1></td>
<td class=c0 id=a1></td>
<td class=c0></td>
<td class=c0></td>
<td class=c0 id=a5></td>
</tr>
<tr>
<td class=c0 id=a2></td>
<td class=c0 id=a2></td>
<td class=c0 id=a4></td>
<td class=c0 id=a4></td>
<td class=c0 id=a6></td>
</tr>
<tr>
<td class=c0 id=a2></td>
<td class=c0 id=a2></td>
<td class=c0 id=a4></td>
<td class=c0 id=a4></td>
<td class=c0 id=a6></td>
</tr>
<tr>
<td class=c0 id=a3></td>
<td class=c0 id=a3></td>
<td class=c0></td>
<td class=c0></td>
<td class=c0 id=a7></td>
</tr>
</table>
&nbsp;
<table border="0" cellpadding="0" cellspacing="0" bordercolor="#111111" id="AutoNumber1" width="50" height="50">
<tr>
<td class=c0 id=b1></td>
<td class=c0 id=b1></td>
<td class=c0></td>
<td class=c0></td>
<td class=c0 id=b5></td>
</tr>
<tr>
<td class=c0 id=b1></td>
<td class=c0 id=b1></td>
<td class=c0></td>
<td class=c0></td>
<td class=c0 id=b5></td>
</tr>
<tr>
<td class=c0 id=b2></td>
<td class=c0 id=b2></td>
<td class=c0 id=b4></td>
<td class=c0 id=b4></td>
<td class=c0 id=b6></td>
</tr>
<tr>
<td class=c0 id=b2></td>
<td class=c0 id=b2></td>
<td class=c0 id=b4></td>
<td class=c0 id=b4></td>
<td class=c0 id=b6></td>
</tr>
<tr>
<td class=c0 id=b3></td>
<td class=c0 id=b3></td>
<td class=c0></td>
<td class=c0></td>
<td class=c0 id=b7></td>
</tr>
</table>
<p><p><button onclick=func01()>Roll again</button>

<script language=javascript>

function func01(){
die1=(Math.floor(Math.random() * (1 - 7)) + 7);
die2=(Math.floor(Math.random() * (1 - 7)) + 7);

for(i=1; i<8; i++){document.getElementById('a'+i).className='c0';document.getElementById('b'+i).className='c0';}

if(die1==4 || die1==5 || die1==6){document.getElementById('a1').className='c1';}
if(die1==6){document.getElementById('a2').className='c1';}
if(die1==2 || die1==3 || die1==4 || die1==5 || die1==6){document.getElementById('a3').className='c1';}
if(die1==1 || die1==3 || die1==5){document.getElementById('a4').className='c1';}
if(die1==2 || die1==3 || die1==4 || die1==5 || die1==6){document.getElementById('a5').className='c1';}
if(die1==6){document.getElementById('a6').className='c1';}
if(die1==4 || die1==5 || die1==6){document.getElementById('a7').className='c1';}

if(die2==4 || die2==5 || die2==6){document.getElementById('b1').className='c1';}
if(die2==6){document.getElementById('b2').className='c1';}
if(die2==2 || die2==3 || die2==4 || die2==5 || die2==6){document.getElementById('b3').className='c1';}
if(die2==1 || die2==3 || die2==5){document.getElementById('b4').className='c1';}
if(die2==2 || die2==3 || die2==4 || die2==5 || die2==6){document.getElementById('b5').className='c1';}
if(die2==6){document.getElementById('b6').className='c1';}
if(die2==4 || die2==5 || die2==6){document.getElementById('b7').className='c1';}
}





</script>

</body>
</html>



One thing: I'd like the textbox there aswell, displaying the numbers in like 6,4 or 3,2. I've tried using the variables die1 and die2, but it says these are unspecified or null, even though they are in the code (i've made this bit bold).

How do I do this?

Thanks alot,

Neil
Ice3T
08-19-2003, 04:58 PM
Here you go,

<html>

<head>
<style>
.c0{background-color:white;}
.c1{background-color:black;}
</style>

<title></title>
</head>

<body bgcolor="#FF0000">

<form>
<input type=text id=t1>
</form>

<table border="0" cellpadding="0" cellspacing="0" bordercolor="#111111" id="AutoNumber1" width="50" height="50">
<tr>
<td class=c0 id=a1></td>
<td class=c0 id=a1></td>
<td class=c0></td>
<td class=c0></td>
<td class=c0 id=a5></td>
</tr>
<tr>
<td class=c0 id=a1></td>
<td class=c0 id=a1></td>
<td class=c0></td>
<td class=c0></td>
<td class=c0 id=a5></td>
</tr>
<tr>
<td class=c0 id=a2></td>
<td class=c0 id=a2></td>
<td class=c0 id=a4></td>
<td class=c0 id=a4></td>
<td class=c0 id=a6></td>
</tr>
<tr>
<td class=c0 id=a2></td>
<td class=c0 id=a2></td>
<td class=c0 id=a4></td>
<td class=c0 id=a4></td>
<td class=c0 id=a6></td>
</tr>
<tr>
<td class=c0 id=a3></td>
<td class=c0 id=a3></td>
<td class=c0></td>
<td class=c0></td>
<td class=c0 id=a7></td>
</tr>
</table>
<BR>
<table border="0" cellpadding="0" cellspacing="0" bordercolor="#111111" id="AutoNumber1" width="50" height="50">
<tr>
<td class=c0 id=b1></td>
<td class=c0 id=b1></td>
<td class=c0></td>
<td class=c0></td>
<td class=c0 id=b5></td>
</tr>
<tr>
<td class=c0 id=b1></td>
<td class=c0 id=b1></td>
<td class=c0></td>
<td class=c0></td>
<td class=c0 id=b5></td>
</tr>
<tr>
<td class=c0 id=b2></td>
<td class=c0 id=b2></td>
<td class=c0 id=b4></td>
<td class=c0 id=b4></td>
<td class=c0 id=b6></td>
</tr>
<tr>
<td class=c0 id=b2></td>
<td class=c0 id=b2></td>
<td class=c0 id=b4></td>
<td class=c0 id=b4></td>
<td class=c0 id=b6></td>
</tr>
<tr>
<td class=c0 id=b3></td>
<td class=c0 id=b3></td>
<td class=c0></td>
<td class=c0></td>
<td class=c0 id=b7></td>
</tr>
</table>
<p><p><button onclick=func01()>Roll again</button>

<script language=javascript>

function func01(){
die1=(Math.floor(Math.random() * (1 - 7)) + 7);
die2=(Math.floor(Math.random() * (1 - 7)) + 7);

document.getElementById('t1').value=die1+', '+die2;

for(i=1; i<8; i++){document.getElementById('a'+i).className='c0';document.getElementById('b'+i).className='c0';}

if(die1==4 || die1==5 || die1==6){document.getElementById('a1').className='c1';}
if(die1==6){document.getElementById('a2').className='c1';}
if(die1==2 || die1==3 || die1==4 || die1==5 || die1==6){document.getElementById('a3').className='c1';}
if(die1==1 || die1==3 || die1==5){document.getElementById('a4').className='c1';}
if(die1==2 || die1==3 || die1==4 || die1==5 || die1==6){document.getElementById('a5').className='c1';}
if(die1==6){document.getElementById('a6').className='c1';}
if(die1==4 || die1==5 || die1==6){document.getElementById('a7').className='c1';}

if(die2==4 || die2==5 || die2==6){document.getElementById('b1').className='c1';}
if(die2==6){document.getElementById('b2').className='c1';}
if(die2==2 || die2==3 || die2==4 || die2==5 || die2==6){document.getElementById('b3').className='c1';}
if(die2==1 || die2==3 || die2==5){document.getElementById('b4').className='c1';}
if(die2==2 || die2==3 || die2==4 || die2==5 || die2==6){document.getElementById('b5').className='c1';}
if(die2==6){document.getElementById('b6').className='c1';}
if(die2==4 || die2==5 || die2==6){document.getElementById('b7').className='c1';}
}

</script>

</body>
</html>


I also removed the onLoad trigger but maybe you wanted to keep it.
neil9999
08-20-2003, 04:05 AM
Thanks very much. I've made the 2 numbers be displayed in the status bar, and an alert appears if the user throws a double six. How do i made it so the alert appears only if they throw a double six and a check box is ticked?

Here's the code:



<html>

<head>
<style>
.c0{background-color:white;}
.c1{background-color:black;}
</style>

<title></title>
</head>

<body bgcolor="#FF0000" onload=func01()>

<table border="0" cellpadding="0" cellspacing="0" bordercolor="#111111" id="AutoNumber1" width="50" height="50">
<tr>
<td class=c0 id=a1></td>
<td class=c0 id=a1></td>
<td class=c0></td>
<td class=c0></td>
<td class=c0 id=a5></td>
</tr>
<tr>
<td class=c0 id=a1></td>
<td class=c0 id=a1></td>
<td class=c0></td>
<td class=c0></td>
<td class=c0 id=a5></td>
</tr>
<tr>
<td class=c0 id=a2></td>
<td class=c0 id=a2></td>
<td class=c0 id=a4></td>
<td class=c0 id=a4></td>
<td class=c0 id=a6></td>
</tr>
<tr>
<td class=c0 id=a2></td>
<td class=c0 id=a2></td>
<td class=c0 id=a4></td>
<td class=c0 id=a4></td>
<td class=c0 id=a6></td>
</tr>
<tr>
<td class=c0 id=a3></td>
<td class=c0 id=a3></td>
<td class=c0></td>
<td class=c0></td>
<td class=c0 id=a7></td>
</tr>
</table>
<BR>
<table border="0" cellpadding="0" cellspacing="0" bordercolor="#111111" id="AutoNumber1" width="50" height="50">
<tr>
<td class=c0 id=b1></td>
<td class=c0 id=b1></td>
<td class=c0></td>
<td class=c0></td>
<td class=c0 id=b5></td>
</tr>
<tr>
<td class=c0 id=b1></td>
<td class=c0 id=b1></td>
<td class=c0></td>
<td class=c0></td>
<td class=c0 id=b5></td>
</tr>
<tr>
<td class=c0 id=b2></td>
<td class=c0 id=b2></td>
<td class=c0 id=b4></td>
<td class=c0 id=b4></td>
<td class=c0 id=b6></td>
</tr>
<tr>
<td class=c0 id=b2></td>
<td class=c0 id=b2></td>
<td class=c0 id=b4></td>
<td class=c0 id=b4></td>
<td class=c0 id=b6></td>
</tr>
<tr>
<td class=c0 id=b3></td>
<td class=c0 id=b3></td>
<td class=c0></td>
<td class=c0></td>
<td class=c0 id=b7></td>
</tr>
</table>
<p><p><button onclick=func01() onmouseover='self.status="Click here to roll the dice"' onmouseout="self.status=die1+' and a '+die2">Roll again</button>

<script language=javascript>

function func01(){
die1=(Math.floor(Math.random() * (1 - 7)) + 7);
die2=(Math.floor(Math.random() * (1 - 7)) + 7);

self.status=die1+' and a '+die2;

for(i=1; i<8; i++){document.getElementById('a'+i).className='c0';document.getElementById('b'+i).className='c0';}

if(die1==4 || die1==5 || die1==6){document.getElementById('a1').className='c1';}
if(die1==6){document.getElementById('a2').className='c1';}
if(die1==2 || die1==3 || die1==4 || die1==5 || die1==6){document.getElementById('a3').className='c1';}
if(die1==1 || die1==3 || die1==5){document.getElementById('a4').className='c1';}
if(die1==2 || die1==3 || die1==4 || die1==5 || die1==6){document.getElementById('a5').className='c1';}
if(die1==6){document.getElementById('a6').className='c1';}
if(die1==4 || die1==5 || die1==6){document.getElementById('a7').className='c1';}

if(die2==4 || die2==5 || die2==6){document.getElementById('b1').className='c1';}
if(die2==6){document.getElementById('b2').className='c1';}
if(die2==2 || die2==3 || die2==4 || die2==5 || die2==6){document.getElementById('b3').className='c1';}
if(die2==1 || die2==3 || die2==5){document.getElementById('b4').className='c1';}
if(die2==2 || die2==3 || die2==4 || die2==5 || die2==6){document.getElementById('b5').className='c1';}
if(die2==6){document.getElementById('b6').className='c1';}
if(die2==4 || die2==5 || die2==6){document.getElementById('b7').className='c1';}
if(die1+die2==12){alert('Double six!');}
}

</script>
<button onclick='alert(die1+die2)' onmouseover='self.status=die1+die2' onmouseout="self.status=die1+' and a '+die2">Add up dice</button>
</body>
</html>



Thanks again,

Neil
Ice3T
08-20-2003, 06:54 PM
<html>

<head>
<style>
.c0{background-color:white;}
.c1{background-color:black;}
</style>

<title></title>
</head>

<body bgcolor="#FF0000" onload=func01()>

<form>
<input type=checkbox id=tb1>
</form>

<table border="0" cellpadding="0" cellspacing="0" bordercolor="#111111" id="AutoNumber1" width="50" height="50">
<tr>
<td class=c0 id=a1></td>
<td class=c0 id=a1></td>
<td class=c0></td>
<td class=c0></td>
<td class=c0 id=a5></td>
</tr>
<tr>
<td class=c0 id=a1></td>
<td class=c0 id=a1></td>
<td class=c0></td>
<td class=c0></td>
<td class=c0 id=a5></td>
</tr>
<tr>
<td class=c0 id=a2></td>
<td class=c0 id=a2></td>
<td class=c0 id=a4></td>
<td class=c0 id=a4></td>
<td class=c0 id=a6></td>
</tr>
<tr>
<td class=c0 id=a2></td>
<td class=c0 id=a2></td>
<td class=c0 id=a4></td>
<td class=c0 id=a4></td>
<td class=c0 id=a6></td>
</tr>
<tr>
<td class=c0 id=a3></td>
<td class=c0 id=a3></td>
<td class=c0></td>
<td class=c0></td>
<td class=c0 id=a7></td>
</tr>
</table>
<BR>
<table border="0" cellpadding="0" cellspacing="0" bordercolor="#111111" id="AutoNumber1" width="50" height="50">
<tr>
<td class=c0 id=b1></td>
<td class=c0 id=b1></td>
<td class=c0></td>
<td class=c0></td>
<td class=c0 id=b5></td>
</tr>
<tr>
<td class=c0 id=b1></td>
<td class=c0 id=b1></td>
<td class=c0></td>
<td class=c0></td>
<td class=c0 id=b5></td>
</tr>
<tr>
<td class=c0 id=b2></td>
<td class=c0 id=b2></td>
<td class=c0 id=b4></td>
<td class=c0 id=b4></td>
<td class=c0 id=b6></td>
</tr>
<tr>
<td class=c0 id=b2></td>
<td class=c0 id=b2></td>
<td class=c0 id=b4></td>
<td class=c0 id=b4></td>
<td class=c0 id=b6></td>
</tr>
<tr>
<td class=c0 id=b3></td>
<td class=c0 id=b3></td>
<td class=c0></td>
<td class=c0></td>
<td class=c0 id=b7></td>
</tr>
</table>
<p><p><button onclick=func01() onmouseover='self.status="Click here to roll the dice"' onmouseout="self.status=die1+' and a '+die2">Roll again</button>

<script language=javascript>

function func01(){
die1=(Math.floor(Math.random() * (1 - 7)) + 7);
die2=(Math.floor(Math.random() * (1 - 7)) + 7);

self.status=die1+' and a '+die2;

for(i=1; i<8; i++){document.getElementById('a'+i).className='c0';document.getElementById('b'+i).className='c0';}

if(die1==4 || die1==5 || die1==6){document.getElementById('a1').className='c1';}
if(die1==6){document.getElementById('a2').className='c1';}
if(die1==2 || die1==3 || die1==4 || die1==5 || die1==6){document.getElementById('a3').className='c1';}
if(die1==1 || die1==3 || die1==5){document.getElementById('a4').className='c1';}
if(die1==2 || die1==3 || die1==4 || die1==5 || die1==6){document.getElementById('a5').className='c1';}
if(die1==6){document.getElementById('a6').className='c1';}
if(die1==4 || die1==5 || die1==6){document.getElementById('a7').className='c1';}

if(die2==4 || die2==5 || die2==6){document.getElementById('b1').className='c1';}
if(die2==6){document.getElementById('b2').className='c1';}
if(die2==2 || die2==3 || die2==4 || die2==5 || die2==6){document.getElementById('b3').className='c1';}
if(die2==1 || die2==3 || die2==5){document.getElementById('b4').className='c1';}
if(die2==2 || die2==3 || die2==4 || die2==5 || die2==6){document.getElementById('b5').className='c1';}
if(die2==6){document.getElementById('b6').className='c1';}
if(die2==4 || die2==5 || die2==6){document.getElementById('b7').className='c1';}
if(die1+die2==12 && document.getElementById('tb1').checked==true){alert('Double six!');}

}

</script>
<button onclick='alert(die1+die2)' onmouseover='self.status=die1+die2' onmouseout="self.status=die1+' and a '+die2">Add up dice</button>
</body>
</html>