Webpage styling keeps reverting to default when javascript code is ran

Question

I am working on a text based game. I am only having some trouble with formatting. I want the text to be white and the background to be black throughout the entire code. I set both of those in style. When I run the script, the styling works and the background is the color that I want, but as soon as I answer a prompt, the background reverts to default white and ignores the styling all together.

<head>
<style>
#game {
    width:1100
}
body {background-color:black}
p {color:white}
</style>
</head>
<body>
<div id="game">
<script type="text/javascript">
    window.onload = function() {
        var seed = prompt("What kind of potato do you want to be? A RUSSET POTATO, RED POTATO, or SWEET POTATO?")
        switch(seed) {
            case 'RUSSET POTATO' :
                document.write("<p>Hot diggity! You became a Russet Potato!</p>");
            break;
            case 'RED POTATO' :
                document.write("<p>Greetings comrade! Welcome to the potatoes of Soviet Socialist Republics!</p>");
            break;
            case 'SWEET POTATO' :
                document.write("<p>Hey there sweet thing! You're such a Sweet Potato!</p>");
            break;
            default:
                document.write("<p>Make sure you are spelling your answers correctly and typing them in all caps!</p>");
        }

        var soil = prompt("What type of soil will you be planted in? PODZOL, STUTTGART, RED, AKADAMA, or CLAY?");
        switch(soil) {
            case 'PODZOL' :
                document.write("There are many minerals, but the acid is ruining the shell of your seed! You die an agonizing and slow death.");
                //link to lose page
            break;
            case 'STUTTGART' :
                document.write("Your seed is nice and cozy in its new home. Happy growing!");
            break;
            case 'RED' :
                document.write("Good choice comrade, but communism isn't always the best choice. Getting water will be a bit difficult.");
            break;
            case 'AKADAMA' :
                document.write("It will be a bit difficult to grown roots, but you are a tough little seed! Hope you can grow well!");
            break;
            case 'CLAY' :
                document.write("A hard rain comes in and your potato drowns.");
                //link to lose page
            break;
            default:
                document.write("Make sure you are spelling your answers correctly and typing them in all caps!");
        }
    }
</script>
</div>
</body>
</html>

I can not seem to figure out how to keep my html style the same when running javascript code. If anyone could help me out here, it would be much appreciated!

+1 Just because it sounds like an amazing game. I want to be a Communist Potato! — Dan Blows, Oct 09 '14 at 16:05
Haha I meant, what's inside the style tags. But now that you mention it, document.write might be causing that style element to disappear. Try viewing the source code when your style's gone and make sure your style is still there. — Ruben Serrate, Oct 09 '14 at 16:14
possible duplicate of [Stylesheet ignored when using body onload and document.write](http://stackoverflow.com/questions/10785519/stylesheet-ignored-when-using-body-onload-and-document-write) — Alex K., Oct 09 '14 at 16:14
@RubenSerrate That was the issue. Thanks! Just a beginners mistake for using document.write — Christopher Klinck, Oct 09 '14 at 16:19

score 2 · Accepted Answer · answered Oct 09 '14 at 16:13

2

Using document.write will overwrite the complete document.

If you want to just change the content of the body, use:

document.body.innerHTML = "Some text here";

That will keep the styling you want and replace the text at the same time.

Here's a JSFiddle showing the differences

answered Oct 09 '14 at 16:13

helllomatt

1,331
8
16

Thank you! This was the problem. It was my mistake for using document.write. I am still a beginner so I am slowly learning. – Christopher Klinck Oct 09 '14 at 16:18

score 0 · Answer 2 · answered Oct 09 '14 at 16:18

Remember that document.write completely rewrites a page.
That's why also your style gets wiped.

Try to add this code to your JS after the document.write

var css = '#game {width:1100}body{background-color:black}p{color:white}',
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet){
    style.styleSheet.cssText = css;
}else{
    style.appendChild(document.createTextNode(css));
}
head.appendChild(style);

This will add a style tag to your head after the document.write so you should be ok!

Webpage styling keeps reverting to default when javascript code is ran

2 Answers2