CODEWITHSUNDEEP
javascripthtml
Quan Pham
Quan Pham

Reputation: 33

Why doesn't linking Javascript files from header work but only at the end of the html works?

I'm playing around with Kinetic.js and I noticed that only linking my javascript at the end of the body would work. Normally wouldn't adding javascript in the head would work?

Here is my HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Tictactoe</title>
        <META http-equiv="Content-Script-Type" content="type">
    </head>

    <body>
        <div id="container"></div>
        <script type="text/javascript" src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.0.min.js"></script>
        <script type="text/javascript" src="javascript.js"></script>
    </body>
</html>

And here is my javascript file:

var stage = new Kinetic.Stage({
    container: 'container',
    width: 500,
    height: 500
});

var layer = new Kinetic.Layer();

var rect = new Kinetic.Rect({
    x: 239,
    y: 75,
    width: 150,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 4
});

// add the shape to the layer
layer.add(rect);

stage.add(layer);

Upvotes: 3

Views: 1311

Answers (6)

net.uk.sweet
net.uk.sweet

Reputation: 12431

The DOM isn't ready when your code is run if you reference it in the head of the page. When Kinetic tries to access your container div it isn't available. If you check the console you'll probably see an error.

Including your script in the bottom of the page guarantees that the DOM is available when the code runs. See this stackoverflow thread for a full explanation.

It's perfectly acceptable to use the approach you're using. See the HTML5 Boilerplate which uses the same technique. Or if you're set on including your script in the head, you could use jQuery's document ready event which won't fire until the DOM is rendered.

Upvotes: 2

Nope
Nope

Reputation: 22339

You are most likely experiencing an issue whereby the DOM is not yet ready but your script is already trying to interact with the elements.

That is why when the script is added to the bottom of the body tag it works as it is loaded after the elements are added.

Rather than adding script tags to the body tag you should wrap your code in the onload event of the window to ensure it executes only after the DOM is ready.

Similar to this:

window.onload = function(){
    // ... your code here
}

the above will set a function to be called when the window's load event fires.
You can also write it similar to the below if you need multiple functions added to the event in different JavaScript files:

window.addEventListener('onload', function(){
    // ... your code here
})

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.

Upvotes: 1

Tom
Tom

Reputation: 4592

Try this:

window.onload=function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 500,
height: 500
});
var layer = new Kinetic.Layer();

var rect = new Kinetic.Rect({
x: 239,
y: 75,
width: 150,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4  
});

// add the shape to the layer
layer.add(rect);

stage.add(layer);
}

Upvotes: 1

fernandosavio
fernandosavio

Reputation: 10407

Probably the script are trying to use a DOMELement. So if your script are in HEAD the BODY tag was not loaded yet. And if you put you script in end of BODY the BODY content are already loaded..

So if you really want to load on HEAD you should attach your script on body.onloaded event.

Upvotes: 2

Steve
Steve

Reputation: 8640

Without knowing much about this kinetic library, my guess is that it doesn't wait for the page to load to take any action. As a result, if you include the JS file on the top of the page, your container isn't in the DOM yet.

Upvotes: 2

John Smith
John Smith

Reputation: 81

It is because it has to load the HTML Element before it runs. Try using the "onload()" function to fix this.

Upvotes: 2

Related Questions