document.write - Where's my content?

Question

I have created a simple rock paper scissors game, with my limited HTML/JavaScript knowledge. I've created a couple buttons: one to run the game and another to reset the game.

Once the game button is clicked, it runs my JavaScript function, which includes a prompt() and a randomization of the choices. A winner is declared. However, I noticed all of my HTMl has dissapeared!

Why and where did my content disappear?
How can I make it so they remain while the user is playing the game and entering info into the prompt?

Code:

<!DOCTYPE html>
<html>
<title>Game: RPS</title>
<body>
<h1>JS Test Output</title>

<h3>Rock, Paper, Scissors: You vs Computer!</h3>
<button onclick="game()">Play Game</button>
<input type="button" value="Reload Page" onClick="window.location.reload()">


<script>


function game(){
var a = prompt("Rock, Paper, or Scissors?");
var b = ["Rock","Paper","Scissors"];
var rand = b[Math.floor(Math.random() * b.length)];

if (a== "Rock" && rand=="Paper") {
    document.write("Computer Wins!");
    }
else if (a=="Rock" && rand=="Scissors") {
    document.write("Player 1 wins!");
    }
else if (a=="Paper" && rand=="Rock") {
    document.write("Player 1 wins!");
    }
else if (a=="Paper" && rand=="Scissors") {
    document.write("Computer wins!");
    }
else if (a=="Scissors" && rand=="Rock") {
    document.write("Computer wins!");
    }
else if (a=="Scissors" && rand=="Paper") {
    document.write("Player 1 wins!");
    }
else if (a == rand) {
    document.write("We have a tie!");
    }
else {
    document.write("That's not a choice! Computer wins!");
    }
}

</script>
</body>
</html>

Thank you for reading, any contributions are most appreciated. This is my first post and I'm really interested in learning this to hopefully become a programmer some day (I plan on taking off time from work and possibly entering a bootcamp). I really enjoy trying/reading/learning programming (don't think I'm ready to learn computer science things like algorithms , data structures yet, or should i start now????)

Jon

show us your code. Sounds like you might be using `document.write` which will wipe out a whole page if used after page load — charlietfl, Dec 17 '14 at 01:49
[Why is document.write considered a “bad practice”?](http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice) — epascarello, Dec 17 '14 at 01:50
You are using document.write() which will wipe out the page if document.load() has not been called according to this thread: http://stackoverflow.com/questions/4511886/document-write-resets-body-once — Tai Kwangi Chicken, Dec 17 '14 at 01:51
wow didn't know that, thank you! I will review your link carefully. — Jon BeginnerofBeginners, Dec 17 '14 at 01:54
@epascarello, document.write is the basis for JSONP, which is still the first or second most accepted way to do cross site scripting. — Octopus, Dec 17 '14 at 03:44
This is an excellent question! I hope somebody can provide a direct answer rather than suggesting an alternative. Where did the content go? What is wrong with this implementation of document.write()? — Octopus, Dec 17 '14 at 04:00
@Octopus Who uses document.write for JSONP? That is untrue. If you used document.write to execute JSONP, you are going to have bigger issues. JSONP uses a script tag appended to the page. — epascarello, Dec 17 '14 at 13:28

Drazzah · Answer 1 · 2014-12-17T15:52:03.957

The reason that your HTML is replaced is because of an evil JavaScript function: document.write().

It is most definitely "bad form." It only works with webpages if you use it on the page load; and if you use it during runtime, it will replace your entire document with the input. And if you're applying it as strict XHTML structure it's not even valid code.

the problem:

document.write writes to the document stream. Calling document.write on a closed (or loaded) document automatically calls document.open which will clear the document.

-- quote from the MDN

document.write() has two henchmen, document.open(), and document.close(). When the HTML document is loading, the document is "open". When the document has finished loading, the document has "closed". Using document.write() at this point will erase your entire (closed) HTML document and replace it with a new (open) document. This means your webpage has erased itself and started writing a new page, starting from scratch.

I believe document.write() causes the browser to have a performance decrease as well (correct me if I am wrong).

an example:

This example writes output to the HTML document after the page has loaded. Watch document.write()'s evil powers clear the entire document when you press the "exterminate" button:

I am an ordinary HTML page.  I am innocent, and purely for informational purposes.  Please do not <input type="button" onclick="document.write('This HTML page has been succesfully exterminated.')" value="exterminate"/> me!

the alternatives:

.innerHTML This is a wonderful alternative, but you would need to select WHERE you want to put the .innerHTML text.

Example: document.getElementById('output1').innerHTML = 'Some text!';

.createTextNode() is the alternative recommended by the W3C.

Example: var para = document.createElement('p'); para.appendChild(document.createTextNode('Hello, '));

NOTE: This is known to have some performance decreases (slower than .innerHTML). I recommend using .innerHTML instead.

the new example (`.innerHTML`):

I am an ordinary HTML page.  I am innocent, and purely for informational purposes.  Please do not <input type="button" onclick="document.getElementById('output1').innerHTML = 'There was an error exterminating this page.  Please replace <code>.innerHTML</code> with <code>document.write()</code> to complete extermination.';" value="exterminate"/> me!<p id="output1"></p>

Haha wow thank you for the explanation. I am unsure what the best way to print something to the screen. There's document.write return console.log and more? Return prints a value and console.log only prints to the console, which isn't the same thing as the browser right? These are probably the basic of basic questions, hencey choice of name tag lol. — Jon BeginnerofBeginners, Dec 17 '14 at 15:51

document.write - Where's my content?

1 Answers1

the problem:

an example:

the alternatives:

the new example (.innerHTML):

the new example (`.innerHTML`):