There are three different types of error that can occur with JavaScript. These are:
- Loading Errors where an error results in your JavaScript being unable to load into the browser in the first place.
- Runtime Errors where the JavaScript loads and starts to run and then crashes when it reaches a statement that it is unable to process.
- Logic Errors where the script runs but doesn't do what it is supposed to do.
These different types of errors vary in how difficult that the cause of the error is to find and also in what you actually need to do in order to be able to find and then fix the error.
Loading errors are perhaps the easiest to fix once you have identified that the reason that your JavaScript is not running is actually due to the JavaScript not loading in the first place. The most likely causes of this type of error are:
- That you have JavaScript turned off in the browser
- That you forgot to upload the JavaScript file to the site or uploaded it to the wrong place
- That you mistyped the name of the file containing the script (remembering that most web sites have case sensitive filenames whereas filenames are not case sensitive when run locally on Windows
Loading errors can also occur when your JavaScript runs too soon and elements of the web page or other files that the script needs to reference have not yet been loaded into the browser.
Runtime errors are actual errors in your JavaScript itself. The cause of this type of error is that the browser is unable to understand what it is that it is supposed to do when it gets to a particular spot in the code. What you have written makes no sense to the JavaScript interpreter. There are many possible causes for this type of error beyond the obvious one of typing in something that is not actually JavaScript. Some possible causes include:
- leaving out a semi-colon between two statements on the same line
- using a comma or colon in place of a semi-colon (or vice versa)
- Using wrong capitalisation in a variable or function name
- Referencing a function that only exists in specific browsers without first testing if it exists
- trying to use a reserved word as a variable or function name
There are of course many other possible causes for runtime errors.
The key to resolving both loading errors and runtime errors is to locate which statements within the JavaScript (if any) have run before the error occurs. That will usually get you pretty close to identifying the cause of the error so that you can then fix it.
Logic errors are not so easy to resolve since they do not cause the JavaScript to fail. With a logic error the JavaScript just doesn't do what it is supposed to do. Basically with a logic error you provide the browser with a perfectly valid series of JavaScript commands for it to run and it does exactly as it is told. The only problem is that the instructions do not match to what you actually intended for the browser to do and so the end result is different from what you expected.
Resolving logic errors involves a bit more work than resolving the other types of JavaScript error. To start with in order to recognise that you have a logic error in the first place you need to know what the expected result of running the JavaScript is supposed to be. If you don't have an expectation of a specific result then you have no way to tell if the JavaScript is functioning correctly or not.