Webpage with multiple JavaScript files

Associate
Joined
28 Nov 2005
Posts
431
Location
Scotland
I have all my JavaScript separate from my HTML, different files. All my JavaScript for the whole site is contained in one file called script.js. This is called when the body loads and is obviously referenced in each page:

Code:
<script type="text/JavaScript" src="script.js"></script>


However on one page of the site, I have links which hide/show page content. This is done using JavaScript and must be called when the page loads. The JavaScript for this is in a separate .js file, called hide.js, because it is specific to this page and also gets referenced:

Code:
<script type="text/JavaScript" src="hide.js"></script>


However the problem is that the hide.js works fine but the script.js is not working at all - almost like it is not being called.

Both js files contain:

Code:
window.onload = setup;

I'm not sure if HTML cannot call two JavaScript files or if it has something to do with both files calling window.onload?
 
One file's "window.onload = setup" is overriding the other. Even more importantly, you can't have two functions named the same thing, so if both files have a function called "setup" then after the first one's loaded that might cause an issue... then again I'm not sure if different JS files would have different namespaces.

Anyway. I recommend using a library like jQuery for this, rather than using window.onload. jQuery is flippin' amazing.

If you don't want that, then you need to factor in a mechanism for checking if window.onload already has a value, and working with it... which might be a nause.
 
One file's "window.onload = setup" is overriding the other. Even more importantly, you can't have two functions named the same thing, so if both files have a function called "setup" then after the first one's loaded that might cause an issue... then again I'm not sure if different JS files would have different namespaces.

Anyway. I recommend using a library like jQuery for this, rather than using window.onload. jQuery is flippin' amazing.

If you don't want that, then you need to factor in a mechanism for checking if window.onload already has a value, and working with it... which might be a nause.

Fair point, I thought that might be the case, can I call a JavaScript file from another?

I think I might just sack it and put the all the contents from the main JS file in the JS file specific to that page and just call the one...nice and easy!
 
You wouldn't "call" a JS file from another, so much as have to code them both to take into account that you might be doing other window.onload stuff in other files so to check its value first. Or use jQuery, where you'd be able to stick this in each file, and let jQuery worry about the "not overwriting each file's commands" part:

Code:
$(document).ready(function() {
//blah stuff to be called on page load here
});

(because each JS script is defining an anonymous function which just gets added to the event handler for window.onload (essentially) so you can have as many of these clauses as you want, with no trouble. I can't stress strongly enough how easy jQuery makes javascript. Really. It's a dream)
 
Back
Top Bottom