JavaScript not working on external file

Question

When I use this code inside my HTML document it's working:

$('a.tocenter[href*=#]').click( function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
    && location.hostname == this.hostname) {
    var $target = $(this.hash);
    $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
    if ($target.length) {
    var targetOffset = $target.offset().top;
    $('html,body').animate({ scrollTop: targetOffset - ( $(window).height() - $target.outerHeight(true) ) / 2 }, 1000);
    return false;}
    }
});

If I try to put this code inside an external JavaScript file and then link it with:

<script src="js/main.js"></script>

It's not working, to let it work I had to wrap it inside:

$( window ).load(function() {
    ...
});

If I do this it works.

I'm a total newbie in JavaScript/jQuery, is this normal or am I doing something wrong? Why is it behaving like that? Is it a good practice to do that?

The only purpose of having it in an external file is for keeping the code clean and understandable.

Answer 1

It basically tells your browser to run script after all DOM nodes are ready, i.e. downloaded and rendered.

Answer 2

Try adding the script tag to the bottom of your html page instead of in the header. That is done for performance reasons that way your page appears as fast as possible and the extra javascript stuff is loaded afterwards.

You can read more about this at : How does the location of a script tag in a page affect a JavaScript function that is defined in it?

Answer 3

Wrap the content inside your file in

$(function(){
//js goes here
});

or put the reference to the file at the bottom of your page

this allows the DOM to load before executing your script.