JavaScript Problems and Errors

This tutorial discusses problems that can occur when implementing JavaScripts from dyn-web or other sources. Perhaps you find that the example documents provided work properly, but when you try to incorporate the code into your documents you run into problems. This tutorial is intended to help you find solutions.

Troubleshooting Steps

If the code doesn't work, begin the troubleshooting process with these two steps:

  • Check to see if there are any error messages.
  • Check the common sources of problems listed below.

JavaScript Error Messages

How do you know whether a JavaScript error has occurred or not? Current browsers show no visible sign. You need to navigate menus or settings to locate error messages. Menu items tend to change from version to version, but they will generally be named Tools, Web Developer, Console, or something similar. Most browsers will display a Web Developer Console when you hit the F12 function key. [1]

If there are no JavaScript error messages or if the messages do not give a clear indication of the problem, read on for more clues.

Common Sources of Problems

Mistakes and oversights in implementing JavaScripts may not always result in error messages, and the messages that do appear may be difficult to interpret. So we list some common sources of problems along with possible error messages they may generate. Various browsers and versions may display different error messages for the same error. The messages shown below are from Firefox.

Missing JavaScript files
Be sure that required external JavaScript files are in place and that their script tags are in the proper order with path specified correctly. Otherwise, the result will be an error message such as: ReferenceError: [something] is undefined. (There are other reasons that this error message would be triggered besides missing JavaScript files though.)
Missing DOM elements or problems with ID
Check that HTML elements required by the code are in place with IDs specified according to instructions. IDs are case sensitive and must follow certain naming conventions for use in JavaScript.[2] Results of missing or unlocated DOM elements can vary. The code may fail silently or display an error message like: TypeError: [something] is null.
Missing or incorrect style specifications
Be sure that any style specifications required by the code are in place and consistent with instructions and example documents. The code may fail silently or display incorrectly without them.
Code not properly initialized
Check that any necessary initialization routines are in place and that they are being properly invoked.[3] Modern code will generally not display errors when not properly initialized.[4]
Syntax errors introduced during implementation
It can be easy to introduce syntax errors into the code, for example, when adding images for rotation or content for tooltips. Fortunately, these will generate helpful JavaScript error messages. Read on for assistance in deciphering these error messages.

Common Syntax Error Messages

A few of the common syntax errors which may be inadvertently introduced during implementation are listed here along with their meaning and possible solutions.

Unterminated string constant (or literal)
Check to see whether you have inserted a carriage return in the middle of a string variable value or array element, or deleted a quote, or have mismatched quote pairs. The line number in the error message will point you to the location.
You can use double quotes or single quotes to enclose a string, but they must be in pairs. If you want an apostrophe to appear in your string enclosed in single quotes, put a backslash before the apostrophe.
String variables may contain quoted HTML attributes, in which case it is easiest to use single quotes to enclose the variable content. Here is an example which also contains an apostrophe:
var msg = '<div class="info">Here\'s the content.</div>';
Expected ')' or missing ) after argument list
Perhaps you have left out a comma between array elements, or inserted an unescaped apostrophe in an array element enclosed in single quotes.
Expected ']' or missing ] after element list
Same as above when using array literal syntax.

More Information

If you are encountering errors when working with object literals, perhaps our tutorial on the subject would be of assistance.

The problems and errors covered in this tutorial are just a few of the most common that might occur when you try to implement code that you know works (i.e., it worked in the demo). Error messages during JavaScript development and debugging are outside the scope of this tutorial.[5]

  1. If you are using the Firebug extension with Firefox, you will see a red X in the far right of the toolbar when a JavaScript error has occurred. Click on it to open the Error Console. ^
  2. IDs should consist of only letters, digits, and underscores. They may not start with a digit. Although other characters are acceptable in HTML they may cause problems when used with JavaScript and CSS. ^
  3. Less modern code may not be initialized if multiple onload handlers compete. See Initializing JavaScript. ^
  4. Some older less robust code may trigger errors when event handlers are activated, for example, when users hover over links set up for use by the code. ^
  5. Professional JavaScript for Web Developers by Nicholas C. Zakas includes a helpful chapter on error handling. ^