Anicho Anicho - 9 days ago 6
HTML Question

Javascript how to change cell colour on timing event?

I am currently learning JavaScript and I want to get a cell to blink yellow on a time based event, it seems the JavaScript fails every time I get to:

document.all.blinkyellow.bgColor = "yellow";


At the moment when my timer reaches 5 it just stops I am guessing it's failing on the above line of code as when I remove it, the timer continues infinitely.

The full JavaScript is below with the relevant html. I would like to know how to properly edit the cell bg colour over time without using a JavaScript library if possible.

This purely so I can learn JavaScript as a whole rather then using a library and not being able to understand the library when I need to make modification or plugin.

Javascript:

var count=0;
var time;
var timer_is_on=0;
setTimeout(doIt, 3000);

function timedCount()
{
if(count == 6){

document.all.blinkyellow.bgColor = "yellow";

}
document.getElementById('txt').value=count;

count=count+1;
time=setTimeout("timedCount()",1000);

}

function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
timedCount();
}

}


HTML:

<table>
<tbody>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 3</td>
</tr>
<tr>
<td class="blinkyellow">Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 3</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 3</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 3</td>
</tr>
</tbody>
</table>






Answer

How come your looking for and element with the id of "txt"? Also you're calling doIt in your setTimeout(doIt, 3000) you may want to change that to setTimeout("timedCount();", 3000);

Also document.all is IE only (Very Important)!

var count=0;
var time;
var timer_is_on=0;
setTimeout("timedCount();", 3000);

function timedCount()
{
    if(count == 6){    

    document.getElementById('blinkyellow').style.backgroundColor = "yellow";

    }

count=count+1;
time=setTimeout("timedCount()",1000);

}

function doTimer()
{
if (!timer_is_on)
  {
  timer_is_on=1;
  timedCount();
  }

}

remember to change the class on the td to an id like this

<td id="blinkyellow">Col 1</td>