Stylesheet ignored when using body onload and document.write

Question

I am messing around with JavaScript experimenting to get a feel for it and have already hit a problem. Here is my html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="testing.js"></script>
</head>
<body onload="writeLine()">
</body>
</html>

Here is the JavaScript testing.js:

function writeLine()
{
    document.write("Hello World!")
}

Here is the style sheet styles.css:

html, body {
    background-color: red;
}

So a very simple example, but I may have chose an awkward example, using on-load in a body tag. So the code above loads and runs the function, but the style sheet does nothing, unless I remove the script tags in the head. I have tried putting the script tags everywhere else, but nothing works. I have researched on-line how to properly link to JavaScript files, and have no found no clear solution, can anyone point out my error?

I have used JavaScript before, but I want a clear understanding from the beginning before I use it any longer

[this post](http://stackoverflow.com/q/10661964/575527) might explain more — Joseph, May 28 '12 at 13:35
Jared Farrish that example is so cool, it actually shows you what's happening at jsfiddle, I shall bookmark that page! Thanks! — deucalion0, May 28 '12 at 13:46
Try using Firebug or Chrome Console to inspect that document, as well; you'll see in the HTML tab (within Firebug) the actual parsed elements, which if you look at the `` element before and after, it shows it as being populated and then emptied. — Jared Farrish, May 28 '12 at 13:49
I used to use Firebug, it was as I remember a handy tool, I feel I should be using this while tackling JavaScript, I know it will save a lot of hassles! Cheers! — deucalion0, May 28 '12 at 13:50
In addition I found this link also quite interesting, on the question `Why is document.write a bad practice?`: http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice — Nope, May 28 '12 at 13:58

score 3 · Answer 1 · answered May 28 '12 at 13:40

3

You cannot use document.write after the document is closed (which it will be when onload fires) without destroying the existing document (including links to stylesheets).

Instead, use DOM manipulation, which is covered by chapters 8 and 9 of the W3C JavaScript Core Skills.

answered May 28 '12 at 13:40

Quentin

800,325
104
1,079
1,205

Which explains why the stylesheet doesn't appear to work; it's been removed/replaced and is then an empty ``. – Jared Farrish May 28 '12 at 13:42
Thank you so much for pointing out WHY it wasn't working, I was baffled! I am now looking up DOM manipulation! Thank you! – deucalion0 May 28 '12 at 13:45

score 2 · Accepted Answer · answered May 28 '12 at 13:41

2

Your problem is with the document.write() called in a wrong moment^*. This method prints given text at current place in the page as was intended to work while the page still loads. Because you are calling it when the whole page was loaded, the results are unexpected (undefined?)

Instead you should manipulate the dom tree directly:

function writeLine() {
    var text = document.createTextNode("Hello World!");
    document.body.appendChild(text);
}

Actually in Opera browser I see red background for few milliseconds and then it goes back to white. Try commenting out document.write() - the background is as expected. Moreover you should include <script> tag at the end of body, but this won't solve your problem.

^{* to be honest, there is no good moment for calling document.write(), avoid it}

answered May 28 '12 at 13:41

Tomasz Nurkiewicz

311,858
65
665
652

I've considered `document.write` and `document.writeLn` to be artifacts which should be considered deprecated in practice. I haven't used it in literally years. – Jared Farrish May 28 '12 at 13:46
So I actually caused myself hassle on my first day of learning JavaScript by document.write, but I am glad I did as I am finding out a lot of interesting things here! Thanks for the information! – deucalion0 May 28 '12 at 13:47
I selected your post as the answer as you did provide a little more info! I shall try and avoid document.write as a standard! Cheers! – deucalion0 May 28 '12 at 13:52

score 2 · Answer 3 · answered May 28 '12 at 13:42

2

In your particular example it doesn't matter where the script tag is added as the document.write command executes after the content is rendered, overwriting the existing content.

If you add an alert before overwriting the content you can see your page is red before it gets overwritten with Hello World.

answered May 28 '12 at 13:42

Nope

21,584
7
42
72

Thanks for the advice, I have now discovered my issues! Thank you! – deucalion0 May 28 '12 at 13:48

Stylesheet ignored when using body onload and document.write

3 Answers3

Linked