Resolving Script Clashes

Adding one pre-written Javascript to your web page is relatively straightforward but when it comes to adding a second script to the same page many people have problems.

The first problem is how to actually add the second script when the instructions state that the second script should have some code placed in the same spot on your page already occupied by something belonging to the first script. The way to resolve this is to combine the two scripts.

If both scripts have an external module to be attached to the head section of your page then simply specify the script tags to attach the code one after the other like this:

If you have the code within your web page itself then just place the code for the second script immediately before the </script> tag. You do not need to code a second set of HTML script tags.

If both scripts have code to go in the same event handler then simply place the code for the second script into the event handler following that of the first script like this:

or you might place it the other way around if that gives a better appearance on your page:

Scripts to be included in the actual body of your page outside of event handlers will rarely cause problems because they will usually go at completely different spots in the page but if they are adjacent to one another then it will not cause any harm.

To add a third or subsequent script to your page, simply follow these same rules as to where to place the code relative to the existing code.

The second problem is that even where the code for the second script has been added correctly but once added either one or both scripts fails to work. The most probable cause of this is a naming conflict. Chances are that the second script has either a variable or function that has the same name as is already being used by the first script. There may even be more than one variable or function name conflict.

The simplest way to resolve naming conflicts is to rename all of the variables and functions in both scripts to identify which script they belong to by adding a number to the end of all of the names. You would add a 1 to the end of each variable and function name used by the first script and a 2 to the end of all of those used by the second script. To be able to do this only requires that you have sufficient knowledge of Javascript to be able to identify what parts of the code represent variable and function names.

The alternative is to carefully examine all of the code of both scripts so as to identify exactly which variable or function names actually clash so as to change the name in one of the scripts.

The third problem is when the two scripts actually clash in what they are trying to do. If this is the case then you need to change the functioning of one or both of the scripts to remove this conflict if you want to use the two scripts on the same page.