Javascript recursive function variable null

Question

I'm trying to test out a simple recursive function to make a countdown timer. So far I have this javascript function:

setInterval(run_countdown("1"),1000);

function run_countdown(num) {
    var str = document.getElementById(num).innerHTML; 
    if(str === 0){
        str = 59;
        num = num + 1;
        run_countdown(num)
    } 
    var minus = str - 1;
    var res = str.replace(str,minus);
    document.getElementById(num).innerHTML=res;
    return;
};

and this is the markup in the browser:

<table border="0">
    <tbody>
        <tr>
            <td id="6">00</td>
            <td id="5">00</td>
            <td id="4">08</td>
            <td id="3">02</td>
            <td id="2">42</td>
            <td id="1">02</td>
        </tr>
        <tr>
            <th>Years</th>
            <th>Months</th>
            <th>Days</th>
            <th>Hours</th>
            <th>Minutes</th>
            <th>Seconds</th>
        </tr>
    </tbody>
</table>

When I run the page in the browser, I get an error in the consol saying "Uncaught TypeError: Cannot read property 'innerHTML' of null" for the very first getElementById. I did an alert on num and it seemed to be passing in ok. Not quite sure where I'm going wrong.

Before adding an answer, I'd just make sure you're running the javascript AFTER you're HTML is generated? — Dan H, Jan 17 '14 at 22:29
@basilikum that was just a typo when filling out my question — jordan, Jan 17 '14 at 22:31
Also, html ids should not begin with numbers. see : http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — brianc, Jan 17 '14 at 22:34
Look carefully at the comment from @elclanrs. It should point you in the right direction. — Scott Sauyet, Jan 17 '14 at 22:38
@bluevoodoo1 Yes. I understand that. This was simply for a test — jordan, Jan 17 '14 at 22:40
@bluevoodoo1 Actually `id`s in HTML5 are allowed to begin with a number, the post you've linked is from year 2008. — Teemu, Jan 17 '14 at 22:46
You have a lot of issues here. what are you trying to accomplish?\ — Alex Shilman, Jan 17 '14 at 22:49

score 2 · Accepted Answer · answered Jan 17 '14 at 22:37

2

as elchlanrs said, setInterval takes a function reference. Try

setInterval(function(){
  run_countdown("1");
}, 1000);

This will wait a full second before calling run_countdown("1"), presumably allowing your document to finish loading before execution which should fix the error.

answered Jan 17 '14 at 22:37

Preston S

2,570
19
36

that was my issue. Thanks! – jordan Jan 17 '14 at 22:41

score 1 · Answer 2 · answered Jan 17 '14 at 22:40

1

You need to wait until your page has loaded:

document.onload = function() {
    setInterval(run_countdown("1"),1000);
}

answered Jan 17 '14 at 22:40

Craig Curtis

758
8
24

Javascript recursive function variable null

2 Answers2