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>

Answer 1

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.

Answer 2

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.