CODEWITHSUNDEEP
javascripthtmlhtml-table
Anicho
Anicho

Reputation: 2667

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>

Upvotes: 0

Views: 1771

Answers (5)

Luc125
Luc125

Reputation: 5837

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
   }
}

Upvotes: 2

Kirk Strobeck
Kirk Strobeck

Reputation: 18559

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

Upvotes: 0

Mike Sav
Mike Sav

Reputation: 15291

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>

Upvotes: 1

Emmett
Emmett

Reputation: 14327

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.

Upvotes: 1

James Allardice
James Allardice

Reputation: 165941

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.

Upvotes: 1

Related Questions