JavaScript Problems and Errors

This tutorial discusses the types of problems and errors that can occur when implementing JavaScripts from dyn-web or other sources. Perhaps you observe that the example documents provided work just fine, 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 by:

Locating Error Messages

How do you know whether a JavaScript error has occurred or not? That depends upon what browser you are using. Internet Explorer displays a yellow warning icon in the status bar. Double-click to open a dialog box, then click on Show Details for information about the error.

Other browsers will generally shown no visible sign that an error has occurred. You will need to navigate menu items or settings to view error messages. Access error messages in Firefox through the Tools menu, Web Developer, Error Console. [1]

Common Sources of Problems

Missteps and oversights in implementing JavaScript code may not always result in JavaScript error messages, or the messages that do appear may be difficult to interpret. So it may be helpful to consider some common sources of difficulty along with possible error messages they may generate.

Missing JavaScript files
Be sure that required external files are in place along with their script tags in the proper order with path specified correctly. Otherwise, the likely result will be one of the following error messages: [something] is undefined, or Object expected, or [something] is not a function, or Object doesn't support this property or method. (There are other reasons that these error messages 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 their IDs specified correctly. IDs are case sensitive and must follow certain naming conventions for use by JavaScript.[2] Results of missing or unlocated DOM elements can vary. The code may fail silently or, in Internet Explorer display the error message: Object required or 'null' is null or not an object; in Firefox: [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 argument list
Same as above when using array literal syntax.

More Information

It is highly recommended that you check your documents in both Firefox and Internet Explorer before making them publicly available. Some problems or errors may be triggered in Internet Explorer but forgiven by Firefox and perhaps other browsers, or vice versa.

If you are encountering errors when working with object literals perhaps our brief 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. Suggested reading: Professional JavaScript for Web Developers by Nicholas C. Zakas includes a helpful chapter on error handling.

Back to top

  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. ^