Document.Write Clears Page

Document.write clears page

document.write() is used to write to the document stream.

In your case, the stream is most probably already closed when the onClick handler is called, because your document has finished loading.

Calling document.write() on a closed document stream automatically calls document.open(), which will clear the document.

How to clear a document.write()

try document.body.innerHTML = ''

How to go back after document.write?

By keeping the buttons in a container and the displayed "page" in another:

function myTest1() {     // document.getElementBy('content') id to get the content element     // set innerHTML to change the content     document.getElementById('content').innerHTML = "JavaScript";}
function goBack() {     // document.getElementBy('content') id to get the content element     // set innerHTML to change the content     document.getElementById('content').innerHTML = "Click a button to change this content";}

<div id="button-container">    <input id="which-language-btn" type="button" onclick="myTest1()" value="What language is this?">    <input id="bo-back-btn" type="button" onclick="goBack()" value="Go back" /></div><div id="content" style="border: 1px solid;">    Click a button to change this content</div>

document.write is killing page

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.

JavaScript Document.Write Replaces All Body Content When Using AJAX

You can't use document.write once the document has completed loading. If you do, the browser will open a new document that replaces the current.

Use the innerHTML property to put HTML code inside an element:

function gen_output(ad_content){
  document.getElementById('mb_ad').innerHTML = ad_content;
}

Put the element before the script, so that you are sure that it exists when the callback function is called:

i am text before
<div id="mb_ad"></div>
i am text after
<script type="text/javascript" src="mb.js"></script>

It doesn't matter much where you place the script, as nothing will be written to the document where it is.

Using document.write removes all other text and displays only the message

To show the count of clicks in the page, and keep your html, a simple way to achieve that is adding a div and manipulate only its content with getElementById (to get the element) and then call innerHTML (to change the content of an HTML element).

Add this bellow your html table:

<div>
  <h1 id=click-event> </h1>   
</div>

And change your onClick():

function onClick () {
  clicks = (clicks + 1);
  document.getElementById("click-event").innerHTML = "you have clicked the button " + clicks + " times";
};

javascript document.write() removes the html from page and display result in a blank page

You can use innerHTML in javascript.
It use to insert data to particular div without affecting page contents.

Example:

var results = "";
for(var i=1;i<=10;i++)
{
     results += "<div class='pagination_btn'>"+i+"</div>";
}
document.getElementById("your result show div id").innerHTML = results;

you can specify $('.pagination_btn').bind("click")... inside your document.ready

Document.Write Clears Page