One issue that sometimes comes up when you want to install more than one JavaScript into the same page is that the scripts interfere with each other so that one or more of them fail to work when the other script is on the same page.
There are several ways in which scripts can interfere with one another. By considering this when we write our scripts we can minimize the possibility of such problems of interference with other scripts.
The first and most likely script collision is where each of the scripts needs to run something when the page finishes loading. There is not just one easy way to fix this problem, there are three obvious ways to do this. Two of these we have already covered in this tutorial series. If you use the faster DOM access script mentioned in the fourth tutorial where we set up a timed loop to check for when a particular element in the page exists, you can easily add multiple scripts that will be triggered when appropriate elements are loaded simply by specifying multiple loaded() calls specifying the elements to locate and the function to run when they are found. If you use the alternative location mentioned in the seventh tutorial and just place your script tags at the bottom of the web page then you do away with the need for testing when the page has loaded at all and hence remove the conflict with no further effort required. The third way which does require a slight modification to the code is needed where you decide to use the window.onload event handler to call the functions. Instead of calling the one function directly you need to call each of the required functions one after the other.
window.onload = function() {func1(); func2();};
The next way in which scripts can collide is where they both need to attach code to the same event on the same element. There are two ways to handle this. The first way is to recode the event handler to call the functions one after the other the same as suggested above for the onload event. A better way of collision proofing your code since it doesn't require code changes when combining the scripts is to use event listeners instead of event handlers. There is more information on this in the series of tutorials covering events in my series of tutorials on the JavaScript DOM
The third area in which JavaScripts can interfere with one another is if they try to make use of the same variable for different purposes (or even for the same purpose since each script expects that it is the only one using the variables that it references in most instances). The easiest solution to this is to encapsulate our script into an object. All of the variables that the script uses are then properties of that object. By having each script create its own object we can ensure that there is no possibility fot the different scripts that we add to our page to use the same variable. Doing this not only avoids scripts conflicting with other scripts but also allows you to run multiple instances of the same script on the same web page. For an example of what I mean by encapsulating your script into an object you can compare my analog clock script which does not use an object for the clock with my multiple analog clock script which does.
More of This Tutorial
- 1 Hello World
- 2 Events
- 3 Visitor Triggered Events
- 4 Timed Events
- 5 Testing Conditions
- 6 Feature Sensing
- 7 Alternate Tag Location
- 8 Functions and Methods
- 9 Passing Parameters
- 10 Variables/Properties
- 11 Objects
- 12 Arrays
- 13 Nodelists
- 14 Loops
- 15 Numbers
- 16 Strings
- 17 Dates
- 18 Alert
- 19 Other Objects
- 20 Extending Objects
- 21 Creating Objects
- 23 JavaScript and Forms
- 24 Updating the Web Page
- 25 Obsolete JavaScript
