setTimeout() and getElementById() don't work together

Question

I first did this:

<script>
    function result2() {
        document.write("...");
    }
    function result1() {
        document.write("..");
        setTimeout(result2, 1000);
    }
    document.write(".");
    setTimeout(result1, 1000);
</script>
<div id="body"></div>

setTimeout() doesn't work at all ninety-nine times out of a hundred, so I was surprised to see it working, even if it glitched at the very end. But it didn't work like I used to want, so I re-wrote the script just a little bit to be something like that:

<script>
    function result2() {
        document.getElementById("body").innerHTML = "...";
    }
    function result1() {
        document.getElementById("body").innerHTML = "..";
        setTimeout(result2, 1000);
    }
    document.getElementById("body").innerHTML = ".";
    setTimeout(result1, 1000);
</script>
<div id="body"></div>

But nothing happened at all, it just gave me a blank page... So I tried setInterval(), but here again, it didn't work. So please, help me, how can I solve this problem?

Every interval you create another interval.... You do not have timeout like your title says you do.... And you should not use document.write after the page loads! — epascarello, Jul 20 '16 at 13:42
Also see http://stackoverflow.com/questions/9916747/why-is-document-body-null-in-my-javascript?noredirect=1&lq=1 — gcampbell, Jul 20 '16 at 13:44
*"`setTimeout()` doesn't work at all ninety-nine times out of a hundred"* - That's an interesting assertion. — nnnnnn, Jul 20 '16 at 14:03

score 2 · Accepted Answer · answered Jul 20 '16 at 13:39

The problem is when the code is executed, the elements are not available in the DOM. You can use any one of the below solution

Move the <script> at the end of <body so, when the code is run, the elements are available in the DOM
Wrap the code that access DOM elements in DOMContentLoaded event callback

<script>
    function result2() {
        document.getElementById("body").innerHTML = "...";
    }

    function result1() {
        document.getElementById("body").innerHTML = "..";
        setInterval(result2, 1000);
    }

    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById("body").innerHTML = ".";
        setInterval(result1, 1000);
    });

</script>
<div id="body"></div>

score 0 · Answer 2 · answered Jul 20 '16 at 13:46

Add your script at the end of body tag and it should work

function result2() {
   document.getElementById("body").innerHTML = "...";
    }

function result1() {
    document.getElementById("body").innerHTML = "..";
        setInterval(result2, 1000);
    }

 document.getElementById("body").innerHTML = ".";
    setInterval(result1, 1000);

<div id="body"></div>

setTimeout() and getElementById() don't work together

2 Answers2