Part X
Troubleshooting: What To Do If . . .

You can't make an omelet without breaking some eggs, as the saying goes. By the same token, you can't create a JavaScript-enabled Web page without making at least a few syntax or logic errors. Fortunately, most of the errors you'll make will fall into one of the categories described in this part.

Although the troubleshooting hints and debugging tips you find in this part don't represent the definitive causes of all errors (lots of ways exist to make errors; I have faith that you'll even invent a few yourself!), the hints in this part can give you a head start in tracking down the problems you're most likely to encounter.

In this part . . .

• Debugging your scripts
• Tracking down logic errors
• Deciphering the JavaScript interpreter's error messages

---

Some HTML Elements Don't Display

First, note exactly what HTML elements appear on-screen (and which ones don't). For example, if only the first two HTML elements that you defined appear, begin checking your source code at the statement that defines the second element. Then check the following items:

• Check to see whether the last displayed element's closing HTML tag is misspelled or missing
• Check to make sure that no closing angle brackets (>) are missing
• Check to see that all your form element definitions are embedded inside the <FORM>...</FORM> tags

Your JavaScript Script Page Doesn't Execute

If you load a JavaScript-enabled Web page into either Navigator 3.0 or Internet Explorer 3.0 and the script doesn't execute, chances are that JavaScript support has been turned off in your browser. To turn it on again, follow these steps:

Navigator

To turn on JavaScript support:

1. Choose Options-->Network Preferences-->Languages.

2. Make sure that the check box next to Enable JavaScript is checked.

Internet Explorer

To turn on JavaScript support:

1. Choose View-->Options-->Security.

2. Make sure that the check box next to Run ActiveX scripts is checked.

Your JavaScript Code Has a Logic Error

A logic error (otherwise known as a human error!) isn't always characterized by anything so drastic as an error message; sometimes it takes a more subtle form. Incorrect assumptions can lead to a calculation that's just a little off in some circumstances, for instance -- and faulty reasoning can yield an incorrect result if a user does something just a tad unexpected.

The best way to unearth logic errors is to have someone else try out your Web page. By the time you finish creating your scripted Web page, you're so familiar with how you expect the page to behave that you have a tendency to miss things that a fresh pair of eyes would spot in a heartbeat. In addition, you may find these hints helpful:

• Be sure that you understand what it is you want to do. If you haven't clarified the results you expect from your scripts, you can't determine whether or not (or how) they're in error.
• Break large chunks of logic into separate functions. In a perfect world, the functions you create will perform a single conceptual task, like determining if a value exists or calculating a number. In real life, though, you may find yourself tempted to add in everything but the kitchen sink until your functions are a whole page long and do lots of completely unrelated things. Resist that temptation! Small functions are easier to debug than large ones, for two reasons: They're easier to read, and they can be tested separately.
• Display variable values with the alert() method. Pop up a window at strategic places in your script to display the values of your script's variables. Often, this technique can help you pinpoint where your logic begins to take a wrong turn.

You Get an Error Message

The errors in this section are generated by Navigator's version of the JavaScript interpreter. Internet Explorer's JavaScript implementation generates similar errors -- the format is slightly different, but the information they provide is pretty much the same. Both browsers display the approximate line number of the error encountered and a little arrow pointing straight at the offending keyword or symbol.

The first thing to do when you get an error is to look at the statement corresponding to the line number in your file. Does anything immediately jump out at you? (If not, don't despair; often, the JavaScript interpreter displays the line number of the point at which it couldn't go on -- meaning that the real problem is a few lines back.)

Next, find the line in your source file that contains the character or keyword that the error suggests (it may be on a different line than the displayed line number) and examine it for missing punctuation, misspellings, and so on.

Still no luck? Then read on for real-life solutions to the most common JavaScript errors.

Take a note of when the error appears. Does the error appear as soon as the page loads? If so, the error is probably in a line before the <FORM>...</FORM> declaration. Does the error appear after you click on a button or enter a text value? If so, the first place to look is in the event handler associated with that button or text element.

The is not a function error

<HTML>
<HEAD>
<TITLE>Troubleshooting</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function showIt(inputString) {

document.writeln(inputString.bold())

document.close()
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="myButton" VALUE="Press me"
onClick="showIt(666)">

In the code sample above, line six is getting the bad rap:

document.writeln(inputString.bold())

In reality, it's the way that line six is being called that's the problem. Take a look at the last line, where showIt( ) is being passed the value of 666. As soon as showIt( ) receives 666, it tries to call a string method (bold( )) on it -- and that dog won't hunt. The answer? Pass showIt( ) a string value of "666" instead of the numeric value 666. If you really want to be able to send numbers to this function, you can insert a couple of lines similar to the following at the beginning of showIt( ):

var tempValue = "" // tempValue is a string
// assign tempValue a string version of the number
tempValue += inputString
// now you can do this: tempValue.bold()

The is not a error error

This one's pretty easy to figure out! Take a look at the figure below and then at the code snippet that produced the error:

<HTML>
<HEAD>
<TITLE>Troubleshooting</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function compute(a, b, c) {

return (a * b * c)
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="myButton" VALUE="Press me"
onClick='compute("scooby", "dooby", "doo")'>

Line six looks like this: return (a * b * c). The error message says that b is not a number, and if you trace down to where line six is being called, you'll see that b isn't a number -- it's a string. (So are a and c!) You can fix this problem either by calling compute( ) with numbers or by using the eval( ) function inside compute( ) to change strings into numeric values (before any computations take place).

The is not defined error

If you try to call a function that the JavaScript interpreter doesn't recognize, likely as not you'll get this error:

Here's the code responsible for the error noted in the preceding figure. Take a close look at line 11, the line that the JavaScript interpreter is indicating:

<HTML>
<HEAD>
<TITLE>Troubleshooting</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function NoSuchFunction() {

alert("Executing NoSuchFunction...")
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="myButton" VALUE="Press me"
onClick='noSuchFunction()'>

Line 11 corresponds to the <FORM> statement. On close inspection, there doesn't appear to be anything wrong with it. There is something wrong with one of the form elements, though -- myButton. The function myButton's onClick event handler is calling is spelled noSuchFunction( ), and it should have been spelled NoSuchFunction( ).

The missing variable name error

<HTML>
<HEAD>
<TITLE>Troubleshooting</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function calculateYearsLeft() {

var 2retirementAge = 65

Well, line six does so have a variable name. The problem is that it starts with a number -- and JavaScript variables must begin either with alphabetic characters or an underscore (_). Change the variable name to retirementAge and this error disappears.

The missing ) after argument list error

<HTML>
<HEAD>
<TITLE>Troubleshooting</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function showIt(a, b, c) {
alert("a is " + a, "b is " + b, "c is " + c
}

As you can probably see right off the bat, it's line six that has the problem, not line seven; line six is missing a closing parenthesis at the very end. The corrected statement looks like this:

alert("a is " + a, "b is " + b, "c is " + c)

The missing ) after formal parameters error

<HTML>
<HEAD>
<TITLE>Troubleshooting</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function showIt(a, b, c {

This time the error message is dead on: line five is missing a ). Here's what line five should look like:

function showIt(a, b, c) {

syntax error

A syntax error is usually caused by misplaced punctuation: a curly brace, parenthesis, comma -- that type of thing. Take a look at the following code snippet and then check out the JavaScript interpreter's reaction.

<HTML>
<HEAD>
<TITLE>Troubleshooting</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function tryme() {

alert('hi')
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>

The error message suggests that line 12 is the culprit, and yet it's also pointing its bony finger at a closing curly brace. Well, as you can see in the preceding code listing, line 12 doesn't contain a curly brace; but line 8 does -- and there's no corresponding opening brace for it, either. That's the culprit!

The unterminated string literal error

On line eight, you can see that the string being sent to alert( ) contains only one double quote, before Thanks. Putting a closing double quote after me. will fix this error right up.

<HTML>
<HEAD>
<TITLE>Troubleshooting</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="myButton" VALUE="Press me"
onClick='alert("Thanks for pressing me.)'>

JavaScript Statements Display

If your JavaScript statements are splashed on your Web page:

• Check to make sure that the displayed statements are surrounded by <SCRIPT>...</SCRIPT> tags.
• Note the first word in the statement that appears and find the line that contains that word in your .html source file; then check the preceding line for anything that looks suspicious.
• Check for unmatched double quotes.