Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript Basics (Retired) Storing and Tracking Information with Variables The Variable Challenge

Posted by Anthony Branze
Anthony Branze
4,887 Points

Question about document.write without document.ready?

When I was learning Javascript foundations, I remember watching a Douglas Crockford talk on JS, in this talk he mentioned that "document.write was great at the time but in hindsight it was not all that great because if used improperly it will obliterate your document and re-write with the content in your document.write function."

The only reason im rembering this is because my document is being obliterated after my document.write function is called and it is being rebuilt with JUST the content of the write function. and I have no idea why other than the document isn't ready by the time it comes to my function. so it is completely remade without any of the default vaules.

1 Answer

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

I found this warning on MDN:
:point_right: Note: as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open which will clear the document.

Now this doesn't happen when you embed document.write in your HTML, since the document is still loading when it runs. In fact, that's one of the only two ways I've seen it used in practice. The other way is when a document is being created entirely (from scratch) by JavaScript.

But clearly, you don't want to use it in a function called after the document is loaded - it's guaranteed to wipe out the document then!

If you want to add to an existing document, there are other ways to do it safely (like innerHTML and appendChild).

Anthony Branze
Anthony Branze
4,887 Points

Okay, That makes sense, I WAS doing exactly what doug was talking about. Thank you very much, on to research innerHTML. Thank you so much for not giving a Code Snippet direct answer, Thinking and finding the solution is such a better learning experience than copying someones code. and not understanding how it does what it does.

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

Excellent points, Tony. I'm not averse to posting code snippets when it's called for, or even solutions (but usually only with a heading of ":warning: SPOILER ALERT").

But most of the time, they aren't needed, or as you point out, the most helpful. Maybe some Answerer's Guidelines would be good to have next to the Markdown Cheatsheet link!

Anthony Branze
Anthony Branze
4,887 Points

So, Im kind of confused as to why innerHTML is wiping the document also? my code is as follows .. A little backstory into my code, storyTainer, is just an empty div i created in my html to be my container for the story to write to (So i didnt wipe my page) and storyLib Is the var that is my nonsensical statement. I borrowed a play button from another students project and implemented that into mine. If Problem code.

document.getElementById('storyTainer').innerHTML =  storyLib;

Entirety of code

function playGame() {

 if (window.confirm("This is a test. Okay for true cancle for false")){
    /*if true */
    console.log("Started Program");  
    var playerName = prompt("What is your name? ");
    var noun = prompt ("What/who is your favorite person place or thing? ");
    var verb = prompt ("Enter a Verb. Action word, or something You do.");
    var adjt = prompt ("Enter an Adjective. Describing something. IE Delicious, beautiful, compassionate.");
;
   alert("Thank you " + playerName + " for answering.. Please wait a moment while we build your story");

   var storyLib = (playerName + " Loves going to " +
                   noun + " Deliberatly waiting for " + verb +
                   adjt + " conquering all. ");

    document.getElementById('storyTainer').innerHTML = storyLib;

            console.log("Program reached end")
} else {
  var cancl = alert ("We're sorry to see you go " + playerName + " Please dont hesitate to come back and build your amazing story with us!");
    console.log("Program cancled");