Multiple Javascripts per Page Tip - Neils Resource WebMultiple Javascripts per Page Tip - Neils Resource WebMulti Scripting - Javascript - Web Dev. - Neils Resource Web

Contract Menu | Expand Menu

Summary of Content
Javascript Logo This tutorial is one of many to be found at the excellent site.
It is not mine and full credit goes to Javascriptkit.
I included it as it answered a major 'hang up' I encountered when using scripting for the first time.

Adding more than one JavaScript to a page

How to add multiple scripts to one page. Many people complain that, while a script works as it should alone on the page, when a second (or more) one is added, all of a sudden either one or both of the scripts no longer work.
The problem
First of all, there is no limit as to the number of scripts a page can contain (other than the "physical" limit), just like there isn't any cap on how much text a page can supposedly hold. Moving on...

The reason why two working scripts may mysteriously not work when put together is simple - script conflict. You see, any duplication in variable declaration, function name, or event-handler access in two scripts can cause at least one, if not both scripts to become inoperative. However, while the possibilities are great, the chances are not. The fact is, 95% of script conflicts are the result of one type of conflict- duplication in event-handler access; in particular, the body ONLOAD event handler.

Many scripts are set to run after an "event" has occurred, such as the moving of the mouse over a link or the completed loading of the document. The later is the most common, and takes the following two forms:

1) <body ONLOAD="runscript()">
2) window.onload=runscript //appears inside the <script> tag

Just for ease of reference, let's call the first form "delta", and the second, "beta" from hereon. If you see one of the above two lines in your page (where "runscript" varies depending on the script), you know the containing script is set to run after the document has loaded. If you have two or more scripts that EACH contain either delta or beta, you have a conflict on your hand.
The solution
The way to go about solving this conflict is simple, though not quite the same to explain. Essentially, what you want is to end up with only ONE delta for both scripts, with that delta calling the two scripts. Let's list some possible scenarios now, and their resolutions:

SCRIPT 1: <body onload="dothis()">
SCRIPT 2: <body onload="dothat()">
RESOLUTION: <body onload="dothis();dothat()">

SCRIPT 1: <body onload="dothis()">
SCRIPT 2: window.onload=dothat()
RESOLUTION: <body onload="dothis();dothat()">

SCRIPT 1: window.onload=dothis
SCRIPT 2: window.onload=dothat
RESOLUTION: <body onload="dothis();dothat()">

As you can see, regardless of whether the two scripts contain "delta" or "beta", the resolution is the same- remove BOTH lines, and call the scripts directly within the <body> tag, each separated by a semicolon. If you wish to combine three scripts, the procedure is the exact same.

By using the above technique, both scripts are called and executed, as opposed to just one- or neither. In other words, conflict avoided! Check out for some additional information on resolving script conflicts. Good luck!

Hyperlink titles may have been abbreviated, (right click on the link and select properties for the full URL)
Top of the PageTop of the PageA double mouse click anywhere on the page will take you back to the top (except when over hyperlinks)

Last Update: 04/03/2008 - Multiple Javascripts per Page Tip - Neils Resource Web

html 4.01 strict css 2.1 javascript 1.2