Why does only one of these lines of javascript fire upon page load?

Question

I am trying to really understand the details of how a browser loads a webpage.

I have two javascript statements in a .js file attached to an HTML file:

d3.select("body").append("span").text("Hello, world!");
alert("huh?");

When I load the page, I see an alert "huh." So the "huh" statement fires.

However "Hello, world" is not appended to the document body.

If I then go and run d3.select("body").append("span").text("Hello, world!") in the console then it executes as expected--i.e. it adds "Hello, world" to the body.

What's going on here? alert("huh?")fires after the window.onload event in the DOM, correct? But d3.select... does not fire?

Why the discrepancy?

If you import your script in the `` then when the code runs **there is no `` yet** - the browser runs the script code as soon as it sees it, before continuing to parse the HTML document. In particular, the browser does not wait for the "load" event unless you specifically arrange for that by putting your code in a function and binding it as a handler for the event. — Pointy, Jan 25 '14 at 14:51

score 1 · Accepted Answer · answered Jan 25 '14 at 14:56

1

The reason that the code manipulating the DOM doesn't fire is because there isn't a DOM yet. To remedy this, you can either

Put your <script> tags in the body, so it will run once there is a body
Encapsulate your code inside of window.onload, so it will fire when the DOM is ready.

Example for the second option:

window.onload = function(){

    d3.select("body").append("span").text("Hello, world!");
    alert("huh?"); 

}

answered Jan 25 '14 at 14:56

mjkaufer

3,311
3
19
52

at what point in the page lifecycle is there a DOM? Does all included js fire once included? And if there is no dom them it does not do anything? – bernie2436 Jan 25 '14 at 15:17
When the page loads, there's a DOM. `onload` is an event that fires when the DOM is ready. All of the javascript inside of an `onload` event will fire once the DOM is loaded. There should be a DOM at some point. Even a blank page technically has a DOM. If you were to have the `onload` event in a blank HTML page, the code would still fire. – mjkaufer Jan 25 '14 at 15:24
will the browser run all js that it finds as soon as it finds it? Unless it is in an event handler (like window.onload) – bernie2436 Jan 25 '14 at 15:47

score 0 · Answer 2 · answered Jan 25 '14 at 14:56

while window load event your function d3.select("body").append("span").text("Hello, world!"); trigger but the Element has not loaded ,so it does not reflect. when we use $(document).ready function this will trigger the function after the full load of page ,so the trigger may reflect and visible . where as alert will be same in both window.onload and $(document).ready

score 0 · Answer 3 · answered Jan 25 '14 at 14:56

For this you need to ensure that a selector for an element is called only after the target element exists in the DOM tree. That's why jQuery's DOM ready is so popular.

Basically, sometimes content of a page, being heavy(large image size etc.), takes time to load. DOM ready is fired first before window load event.

Any function where you select something as in your case needs to be fired after ensuring that the node is in DOM tree, or in other words; at least after DOM ready event fires. Otherwise, even if it works once on one browser, it might be intermittent since it depends on the race, which happens first - execution of JS or creation of the element. Whenever the former happens, it will fail.

I hope this helps !

score -1 · Answer 4 · answered Jan 25 '14 at 14:57

There is no body element yet. There are two solutions:

Either you wait for document to load

<head>
<script>
$(document).ready(function() {
d3.select("body").append("span").text("Hello, world!")
});
</head>

Or you put it in the body

<body>
<script>
d3.select("body").append("span").text("Hello, world!")
</script>
</body>

Why does only one of these lines of javascript fire upon page load?

4 Answers4