document.write is killing page

Question

I created a timer and did not notice the document.write was killing the page because everything was working great. However, when the timer goes to 0, it only displays what is in the document.write function rather than everything else in my page.

This is what is killing the page and only the text in ()'s is what is showing..

document.write("The NFL Season is here!!");

How can I make this so that the timer would stop and this text displays or this text can display on my page without killing the rest of the code?

Here is my full code to demonstrate how I am doing this.

<script type="text/javascript">
        function cdtd () {
            var nflSeason = new Date ("September 10, 2015 08:30:00");
            var now = new Date();
            var timeDiff = nflSeason.getTime() - now.getTime();
            if (timeDiff < 0) {
                clearTimeout(timer);
                document.write("The NFL Season is here!!");
                //Run any code needed for countdown completion here.
            }

            var seconds = Math.floor(timeDiff / 1000);
            var minutes = Math.floor(seconds / 60);
            var hours = Math.floor(minutes / 60);
            var days = Math.floor(hours / 24);
            hours %= 24;
            minutes %= 60;
            seconds %= 60;

            document.getElementById("daysBox").innerHTML = days;
            document.getElementById("hoursBox").innerHTML = hours;
            document.getElementById("minsBox").innerHTML = minutes;
            document.getElementById("secsBox").innerHTML = seconds;

            var timer = setTimeout('cdtd()',1000);
        }
</script>

HTML

<div class="countdown_out">
<div id="countdown_title">NFL Season Opener Countdown</div>
<div class="countdown_position">
    <div class="countdownBox">
        <div class="countdown_time_category">Days</div>
        <div id="daysBox" class="countdown_time"></div>
    </div>
    <div class="countdownBox">
        <div class="countdown_time_category">Hours</div>
        <div id="hoursBox" class="countdown_time"></div>
    </div>
    <div class="countdownBox">
        <div class="countdown_time_category">Minutes</div>
        <div id="minsBox" class="countdown_time"></div>
    </div>
    <div class="countdownBox">
        <div class="countdown_time_category">Seconds</div>
        <div id="secsBox" class="countdown_time"></div>
    </div>
</div>

[Related - What damage is done by document.write()?](http://stackoverflow.com/questions/2559189/what-damage-is-done-by-document-write) — James Thorpe, Sep 10 '15 at 16:13
This is *exactly* why you should not be using `document.write()`. Once the page is fully loaded, it **destroys** everything and overwrites the DOM. If you want to write to the DOM, use `.innerHTML` (or similar). — gen_Eric, Sep 10 '15 at 16:20
P.S. Do **not** do `setTimeout('cdtd()',1000)`. This uses `eval` and is very bad practice. Instead do `setTimeout(cdtd,1000)`. — gen_Eric, Sep 10 '15 at 16:21
How can I do this. I followed the link James Thorpe added and tried that and it doesn't work. How can I do innerHTML with it? — Becky, Sep 10 '15 at 16:21
@Becky: The same way you *already* are: `document.getElementById("daysBox").innerHTML = days;` — gen_Eric, Sep 10 '15 at 16:24
So what could I put in this box of code that will read when the timer is less than 0 it will add that div? — Becky, Sep 10 '15 at 16:26
just create a div in your page `
` and in javascript replace `document.write()` with `document.getElementById("page_message").innerHTML = 'The NFL Season is here!!';` — Sushil, Sep 10 '15 at 16:26
@Sushil How could I set this, so that this div isn't always showing unless the timer has ran out though? — Becky, Sep 10 '15 at 16:29
give `style='display:none'` to the div and when you're showing the message just unhide it using `document.getElementById("page_message").style.display = 'inline';` — Sushil, Sep 10 '15 at 16:30
But placing the `getElementById` where it is just shows the content. It doesn't read when the timer has ran out. That is why that doc.write was in here `if (timeDiff < 0) { clearTimeout(timer); document.write("The NFL Season is here!!"); //Run any code needed for countdown completion here. }` — Becky, Sep 10 '15 at 16:32
Or did you mean to put the `document.getElementById("page_message").innerHTML = 'The NFL Season is here!!';` in that if statement? — Becky, Sep 10 '15 at 16:36
Gotcha. I tried that and it worked. Thanks! I will award you the answer if you answer the question. Thanks! — Becky, Sep 10 '15 at 16:37
I've posted my answer @Becky. please upvote and accept it if it helped you. — Sushil, Sep 10 '15 at 16:43

score 2 · Accepted Answer · answered Sep 10 '15 at 16:42

as everybody suggested. document.write will clear everything from the DOM. the best way to write this would be to have a DIV in your HTML and set that div in your javascript code.

here's what your HTML should look like

<div id="page_message" style="display: none;"></div>
<div class="countdown_out">
<div id="countdown_title">NFL Season Opener Countdown</div>
<div class="countdown_position">
    <div class="countdownBox">
        <div class="countdown_time_category">Days</div>
        <div id="daysBox" class="countdown_time"></div>
    </div>
    <div class="countdownBox">
        <div class="countdown_time_category">Hours</div>
        <div id="hoursBox" class="countdown_time"></div>
    </div>
    <div class="countdownBox">
        <div class="countdown_time_category">Minutes</div>
        <div id="minsBox" class="countdown_time"></div>
    </div>
    <div class="countdownBox">
        <div class="countdown_time_category">Seconds</div>
        <div id="secsBox" class="countdown_time"></div>
    </div>
</div>

and update your Javascript code to look like this.

<script type="text/javascript">
    function cdtd() {
        var nflSeason = new Date("September 10, 2015 08:30:00");
        var now = new Date();
        var timeDiff = nflSeason.getTime() - now.getTime();
        if (timeDiff < 0) {
            clearTimeout(timer);
            document.getElementById("page_message").innerHTML = 'The NFL Season is here!!';
            document.getElementById("page_message").style.display = 'inline';

            //Run any code needed for countdown completion here.
        }

        var seconds = Math.floor(timeDiff / 1000);
        var minutes = Math.floor(seconds / 60);
        var hours = Math.floor(minutes / 60);
        var days = Math.floor(hours / 24);
        hours %= 24;
        minutes %= 60;
        seconds %= 60;

        document.getElementById("daysBox").innerHTML = days;
        document.getElementById("hoursBox").innerHTML = hours;
        document.getElementById("minsBox").innerHTML = minutes;
        document.getElementById("secsBox").innerHTML = seconds;

        var timer = setTimeout('cdtd()', 1000);
    }
</script>

Hope this helps.

score -1 · Answer 2 · answered Sep 10 '15 at 16:22

-1

You should use document.write only from synchronious code before page is fully loaded. Do not use it from timers, event handlers and scripts marked by defer or async. You have to use other way of changing DOM.

answered Sep 10 '15 at 16:22

Qwertiy

19,681
15
61
128

document.write is killing page

2 Answers2