Using document.write() and setTimeout() to display time Using document.write() and setTimeout() to display time google-chrome google-chrome

Using document.write() and setTimeout() to display time


First off, you should never use document.write(). Early on it was the only way to write stuff the the DOM but today it should only be used... well, really it should not be used. Ever. And I would be happy if they deprecated and removed it altogether.

Each element is added to the DOM and scripts are executed in the order it is received (top to bottom). So the script tag in the header is executed first. Since it only has a function in it, nothing get executed. It simply stores the ShowTime function in memory to be used at some other time.

It then continues loading the rest of the DOM until it reaches the second script tag. It executes it as well. That tag calls ShowTime so the pointer jumps into the ShowTime function and executes it from the top down (this is why I moved the second script after the myDiv div tag, executing it before that tag exists means it has not been added to the DOM yet and the document.getElementById would return a null value which means the elem.textContent = ... would halt with an error complaining that elem is not an object and does not contain a textContent property).

setTimeout delays the execution of a function ONE TIME. However, since the setTimeout is within the function it will essentially "infinite loop". Once the function is called once it will run and set the time into the div with ID "myDiv" then will call the setTimeout function to call itself again. So after 5 seconds it calls itself again then sets another timeout for another 5 seconds. Then executes itself again and again sets another timeout for 5 seconds... you see the pattern happening here. There should be no difference per browser. They should all handle this the same way.

So... using the commented code should work fine (and is the accepted way to write to a DOM element):

<!DOCTYPE html><html><head><meta name="description" content="[StackOverlow document.write() question]"><script type="text/javascript">    function ShowTime()    {        var dt = new Date();        var elem = document.getElementById("myDiv");        elem.textContent = dt.toTimeString();        window.setTimeout("ShowTime();", 5000);    }</script></head><body><div id="myDiv"></div><script type="text/javascript">    ShowTime();</script></body></html>

So back to document.write. Why does it behave differently in each browser? According to the standard, document.write() is supposed to write to a new document only. If the document already exists (e.g. the page you have the script in), it is supposed to execute a document.open() first which will clear all contents of the page and start a new, blank document. Why does Chrome not clear? I don't know. The developers may have not updated the function since it is not recommended that it be used anymore. I did a search and did not come up with anything as far as why the behavior of Chrome would be different. I tested it on a site and the site cleared for me, so you may be using an older version of Chrome that maybe has a bug? Unfortunately I can't offer a better explanation but definitely feel you should heed the warnings and avoid using document.write altogether.


use document.open() and document.close()

<!DOCTYPE html><html><head><meta name="description" content="[StackOverlow document.write() question]"><script type="text/javascript">    function ShowTime()    {        var dt = new Date();        document.open();        document.write(dt.toTimeString());        document.close();        // var elem = document.getElementById("divElem");        // elem.textContent = dt.toTimeString();        window.setTimeout(ShowTime, 5000);    }</script></head><body><script type="text/javascript">    ShowTime();</script><div id="myDiv"></div></body></html>