Clever Geek Handbook

Document.write - Where is my content?

I created a simple rock paper scissors game with my limited knowledge of HTML / JavaScript. I created a couple of buttons, one to start the game and the other to reset the game.

After clicking the play button, my JavaScript function is executed, which includes a hint () and selection randomization. The winner is announced. However, I noticed that all my HTMls were gone!

  • Why and where did my content disappear?
  • How can I make them stay while the user plays the game and enters information into the invitation?

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 not a choice! Computer wins!");
    }
}

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

Thanks for reading, all contributions are greatly appreciated. This is my first post and I am really interested in learning how to do it, hopefully becoming a programmer one day (I plan to take time off from work and maybe introduce bootcamp). I really like reading / reading / learning programming (don't think I'm ready to study computer science subjects like algorithms, data structures, or should I start now ??)

John

+3


source to share


1 answer


The reason that your HTML is replaced, due to malicious JavaScript function: . document.write()

This is definitely "bad shape". It only works with web pages if you use it on page load; and if you use it at runtime it will replace the entire document in the input. And if you apply it as a strict XHTML framework, it is not even correct code.

problem:

document.write

is written to the document stream. Calling document.write

on a closed (or loaded) document automatically calls document.open

which will clear the document.

- quote from MDN

document.write()

has two henchmen,, document.open()

and document.close()

. When the HTML document is loaded, the document is "open". When the document has finished loading, the document is "closed". Using document.write()

at this point, you will delete the entire (closed) HTML document and replace it with a new (open) document. This means that your web page erased itself and started writing a new page starting from scratch.

I believe this is document.write()

causing the browser to have a performance degradation (correct me if I'm wrong).

example:

This example writes the output to an HTML document after the page has loaded. Watch the document.write()

evil forces 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!
Run code


alternatives:

  • .innerHTML

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

    .

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

  • .createTextNode()

    is an alternative recommended by the W3C .

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

NOTE. Known to have performance degradation (slower than .innerHTML

). Instead, I recommend using .innerHTML

.

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>
Run code


+3


source






More articles:


All Articles