Javascript how to change cell colour on timing event?

Question

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>

score 2 · Answer 1 · answered Jun 23 '11 at 15:51

When you want a given function to be called repeatedly, for example every second, you should use the window.setInterval(code_or_function, milliseconds) method:

var count = 0;
var interval = setInterval(timedCount, 1000);

function timedCount() {
   count++;
   document.getElementById("txt").value = count;
   if (count == 6) {
       document.getElementById("blinkyellow").style.backgroundColor = "yellow";
       window.clearInterval(interval);  // Stops the timer
   }
}

score 1 · Answer 2 · answered Jun 23 '11 at 15:15

1

To get a set of elements by class, use the getElementsByClassName function:

var elements = document.getElementsByClassName("blinkYellow");

You can then loop through that set of elements and apply the style to them, using style.backgroundColor:

for(var i = 0; i < elements.length; i++) {
    elements[i].style.backgroundColor = "yellow";
}

See an example of this working here.

answered Jun 23 '11 at 15:15

James Allardice

164,175
21
332
312

Thanks for your support this worked if I could accept two answers I would. – Anicho Jun 23 '11 at 15:50
@Anicho - No problem! Just bear in mind that if you're using `getElementById` with more than element sharing the same `id`, you are likely to have problems. In that situation, you're going to have to use `class`, as I have done here. – James Allardice Jun 23 '11 at 15:56

Mike Sav · Accepted Answer · 2011-06-23T15:21:33.173

1

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>

edited Jun 23 '11 at 15:21

answered Jun 23 '11 at 15:15

Mike Sav

14,805
31
98
143

Thanks this worked I have been trying to do it in jsFiddle but that seems to be buggy whe using .getElementByID I just tried it on a html page on my desktop and it seemed to work just fine :). Thank You Very Much for your help... – Anicho Jun 23 '11 at 15:50
doit is supposed to be doTimer() which just makes sure when button is pressed we don't get any unwanted actions. – Anicho Jun 23 '11 at 21:15

score 1 · Answer 4 · edited May 23 '17 at 12:13

1

The document.all.foo syntax gets elements by id, not class.

So it'll work if you change <td class="blinkyellow"> to <td id="blinkyellow">.

Or better yet, use the more supported document.getElementById('blinkyellow') syntax.

edited May 23 '17 at 12:13

Community

1
1

answered Jun 23 '11 at 15:18

Emmett

14,035
12
56
81

score 0 · Answer 5 · answered Jun 23 '11 at 15:28

0

If you do want to use jQuery, then it's simply..

$(document).ready(
    function() 
    {
        $(this).oneTime(
            3000, 
            function() 
            {
                $('.blinkyellow').css('background-color', 'yellow');
            }
        );
    }
);

Be sure to download Timers and jQuery

answered Jun 23 '11 at 15:28

Kirk Strobeck

17,984
20
75
114

Thanks for the jquery answer appreciated being able to see the difference I am learning pure JavaScript before I decide to learn normal jscript. – Anicho Jun 23 '11 at 15:51

Javascript how to change cell colour on timing event?

5 Answers5