PDA

View Full Version : How would I make a cell in a table randomly turn red every 300 ms ?

john mcmahon
02-13-2008, 08:52 PM
Hi, I am very new to Javascript and am having a problem writing this program, so I was wondering if one of you experts could help me. This is the problem I am having. Its probably simple to you guys.
I am trying to do this :
when the "Start" button is clicked a random cell changes its background color to red for 350ms, then back to white, then another cell becomes red, then to a different cell, every 350ms.
It is supposed to be in a 3 x 3 table.
I am trying to get it to work by applying it to the last program i wrote wich is this one:

HTML>
<HEAD>
<TITLE> </TITLE>

<SCRIPT LANGUAGE = "JavaScript">

function clicked(){


if (event.srcElement.style.backgroundColor == "red")
event.srcElement.style.backgroundColor = "white";
else
event.srcElement.style.backgroundColor = "red";
}




</SCRIPT>

</HEAD>

<BODY>
<CENTER>
<TABLE BORDER= "1" HEIGHT= "50%" WIDTH= "50%">

<TR>
<TD ONCLICK="clicked()">&nbsp</TD>
<TD ONCLICK="clicked()">&nbsp</TD>
<TD ONCLICK="clicked()">&nbsp</TD>
</TR>

<TR>
<TD ONCLICK="clicked()">&nbsp</TD>
<TD ONCLICK="clicked()">&nbsp</TD>
<TD ONCLICK="clicked()">&nbsp</TD>
</TR>

<TR>
<TD ONCLICK="clicked()">&nbsp</TD>
<TD ONCLICK="clicked()">&nbsp</TD>
<TD ONCLICK="clicked()">&nbsp</TD>
</TR>


</TABLE>

<INPUT TYPE = "BUTTON" VALUE = "CLICK TO START" ONCLICK = "START()">




</CENTER>

</BODY>

</HTML>
Any help would be greatly appreciated.
Thank you:)
Rohan_Shenoy
02-13-2008, 10:47 PM
Well, I could write this but only to find that it does not work in IE but workd in FF opera!


<html>
<head>
<script>
//copyright 2008 Rohan Shenoy;
//Website: www.w3hobbysit.com; Email: rohanshenoyATbluebottle.com; DO NOT REMOVE THIS COPYRIGHT NOTICE.
function red()
{
cindices=new Array("0","1","2","3","4","5","6","7","8");//an simple array containing numbers. it should extend to one less than the numbers of cells in the table. Eg: If the table has 9 cells, the array should contain upto 8 values.
var cindex = cindices[Math.floor(Math.random()*cindices.length)];//Gets a number randomly from the above array.
var holder=document.getElementsByTagName("td");//Gets an array of all cells.
for(var i=0; i<holder.length; i++)
{
if(i!=cindex)//holder[i] in the next line reresents an individual cell element in the array.
{holder[i].style["background"]="white";}//the color to be reset to
else
{holder[i].style["background"]="red";}//the color to be set to for the moment
}
}
function randomize()
{
s=1/1000;
setInterval("red()",s);
}
</script>
</head>
<body>
<table border="0" cellpadding="0" width="100%">
<tr>
<td width="20%">cell 1</td>
<td width="20%">cell 2</td>
<td width="20%">cell</td>
</tr>
<tr>
<td width="20%">cell</td>
<td width="20%">cell</td>
<td width="20%">cell</td>
</tr>
<tr>
<td width="20%">cell</td>
<td width="20%">cell</td>
<td width="20%">cell</td>
</tr>
</table>
<p>
<input type="button" value="start" onclick="randomize()">
</p>
</body>
</html>


I will agree that this exercise was a good challenge to me! :)
And don't forget to click on the "Thanks user for this post" button if it helped!:D
Philip M
02-14-2008, 07:25 AM
Works in IE when:-

function randomize() {
s=350;
setInterval("red()",s);
}
Arty Effem
02-14-2008, 01:49 PM
<html>
<head>
<script>

/* Copyright cheap homework cheats everywhere */

function cell(tableId)
{
var cells=document.getElementById(tableId).getElementsByTagName("td"), lastCell=0;

function change()
{
var newCell;

cells[lastCell].style.backgroundColor='#fff';

while( (newCell=Math.floor(Math.random()*cells.length))==lastCell )
;

cells[lastCell=newCell].style.backgroundColor='#f00';
}

return change;
}

</script>
</head>
<body bgcolor='#ffffff'>
<table border="0" cellpadding="0" width="100%" id='theTable'>
<tr>
<td width="20%">cell</td>
<td width="20%">cell</td>
<td width="20%">cell</td>
</tr>
<tr>
<td width="20%">cell</td>
<td width="20%">cell</td>
<td width="20%">cell</td>
</tr>
<tr>
<td width="20%">cell</td>
<td width="20%">cell</td>
<td width="20%">cell</td>
</tr>
</table>
<p>
<input type="button" value="Start (OK to press more than once)" onclick="setInterval(cell('theTable'), 350);">
</p>
</body>
</html>