I'm trying to change both the background and text color of a table and all its cells with a timer. I have the script below just before the end tag. The background is the only thing that changes. The id of the table is 'titleTable'. Thanks

<script language="Javascript">
<!-- Begin
titleTable.bgColor='#FFFFFF';
setInterval("Timer()", 500);
x=1;
function Timer() {
    set=1;
    if(x==0 && set==1) {
        titleTable.bgColor='#000000';
        titleTable.style.color='#FFFFFF';
        x=1;
        set=0;
    }
    if(x==1 && set==1) {
        titleTable.bgColor='#FFFFFF';
        titleTable.style.color='#000000';
        x=0;
        set=0;
    }
}
// End -->
</script>

I'm trying to change both the background and text color of a table and all its cells with a timer. I have the script below just before the end tag. The background is the only thing that changes. The id of the table is 'titleTable'. Thanks

<script language="Javascript">
<!-- Begin
titleTable.bgColor='#FFFFFF';
setInterval("Timer()", 500);
x=1;
function Timer() {
    set=1;
    if(x==0 && set==1) {
        titleTable.bgColor='#000000';
        titleTable.style.color='#FFFFFF';
        x=1;
        set=0;
    }
    if(x==1 && set==1) {
        titleTable.bgColor='#FFFFFF';
        titleTable.style.color='#000000';
        x=0;
        set=0;
    }
}
// End -->
</script>

• javascript
• html
• text
• colors
• setinterval

• Could you post the code you do have, to make it easier to trouble shoot where the issue is taking place. – Loktar Commented Feb 7, 2011 at 18:42
• You can format code by indenting it with four spaces. – SLaks Commented Feb 7, 2011 at 18:45
• Are you sure the background color changes? The code to change background color is this, titleTable.style.backgroundColor = '#FFFFFF'. Also how are u grabbing the DOM Element for titleTable? document.getElementById? Please post the full code. – Aravindan R Commented Feb 7, 2011 at 18:55
• this is the same as stackoverflow./questions/25455485/… – Patrick W. McMahon Commented Aug 27, 2014 at 21:44

2 Answers 2

(function() {
    var s = document.getElementById('titleTable').style,
        f = false,
        c1 = '#000000',
        c2 = '#ffffff';

    setInterval(function() {
        s.backgroundColor = f ? c1 : c2;
        s.color = f ? c2 : c1;
        f = !f;
    }, 500);
})();

Live demo: http://jsfiddle/Dzk2h/2/

Just put the above code inside a <script> element at the bottom of your page.

var titleTable = document.getElementById('titleTable');

if(x==0 && set==1)
->
if((x==0) && (set==1))

Just use "blink" tag =)

Ah, "The background is the only thing that changes". Check styles. If you have CSS rule like

#titleTable td { color: black; }

It will not be overriden by setting inline style to the table.