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:
EXAMPLE #1:
SCRIPT 1: <body onload="dothis()">
SCRIPT 2: <body onload="dothat()">
RESOLUTION: <body onload="dothis();dothat()">
EXAMPLE #2:
SCRIPT 1: <body onload="dothis()">
SCRIPT 2: window.onload=dothat()
RESOLUTION: <body onload="dothis();dothat()">
EXAMPLE #3:
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 http://www.javascriptkit.com/javatutors/eventaction4.shtml
for some additional information on resolving script conflicts. Good luck! |
This tutorial is one of many to be found at the excellent site.
Javascriptkit.com
