The Scripts stopped working

info help The problem: Many people complain that, while a script works as it should alone on the page, when a second (or more) is added, all of a sudden, things take an unpleasant twist, and either one or both of the scripts no longer work.

The usual reason why two working scripts may mysteriously not work when put together is simple - script conflict.


help Whats up: Most 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. That 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.
help 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!





On the right is an example web page with two Javascripts, as in the above
EXAMPLE #2:
SCRIPT 1: <body OnLoad="dothis()">
SCRIPT 2: window.OnLoad=dothat()
RESOLUTION: <body OnLoad="dothis();dothat()">





In the <HEAD> is mousemover script with a
body OnLoad event handler.







In the <BODY> is ageclock script which has a
window.OnLoad event handler.


In this example we need to remove the line:
window.onload = update;
and add ;update() to the < BODY > tag.
  <HTML>
<HEAD>
<SCRIPT>
// mousemover script
function init() {
if ( isNN )
document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = handleMouseMove;
}
function handleMouseMove(evt) {
" "
" "
" "
return false;
}
</SCRIPT>
</HEAD>

<BODY onLoad="init();update()" >


Bla Bla Bla Bla
Page content
Bla Bla Bla Bla

<SCRIPT>
// ageclock script
function update() {
var text = ageClock();
var aD = getElement('ageDisplay');
" "
" "
" "
}
setTimeout('update()',1000);
}
window.onload = update;
</SCRIPT>

</BODY>
</HTML>