Menu
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!
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
965
asked May 08 '26 21:05
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.
document.writewrites to the document stream. Callingdocument.writeon a closed (or loaded) document automatically callsdocument.openwhich 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).
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!.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.
.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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
