JavaScript Examples

Here are some common types of bugs, which hopefully will help you track down bugs of your own.

Yer Basic Syntax Error

This function is defined inside the <SCRIPT> tag, and looks like this:

function BadSyntax(somevar) { // This function generates a syntax error. var x = 0, y = 0 if (somevar == 1) { x = 1 y = 2 else x = 0} } This is a fairly typical syntax error and an easy mistake to make, but it can be difficult to fix, especially if you take the error message at its word. The error is not the else statement itself, but the fact that all the statements after if (condition) need to be bracketed together. The correct code is: function BadSyntax(somevar) { // This function generates a syntax error. var x if (somevar == 1) { x = 1 y = 2 } else { x = 0} }

The Old Reserved Word Trick

This function is defined inside the <SCRIPT> tag, and likely won't give you an error message by itself.

function close(x){ alert("hi from: close function!") // Examine passed variable. if (x==1) { // Add your code here. } } The following button tries to run the incorrectly named function.

Here's the source code for the form.

<FORM> <P><INPUT TYPE="button" VALUE="Run Function" onClick="close(1)" > </FORM> The problem? close is one of many reserved words, that is, words that are part of JavaScript itself. Using these words for functions or variables will have undesired effects. Click here for a list of JavaScript's reserved words.

A Checkbox's onClick Event

I worked up this example from a reader's seemingly simple question about attaching an event to a checkbox. Each form below is supposed to call the DoSomething() routine, defined in the <HEAD> section like this: function DoSomething() { // This function is supposed to be called when the user clicks on a checkbox. // I added the alert statement for debugging purposes, so I can see for sure // whether the function is being "hit". alert("hi from: DoSomething function!") } Here's the code: <FORM NAME="form1"> <H3>Form 1: This won't work, but it looks like it should.</H3> <P><INPUT TYPE="checkBox" onClick="DoSomething()" > Go ahead. Click. </FORM> The problem? Unprintable characters that look like spaces surround onClick above, making the browser misread the keyword. Remember the browser is designed for upward compatibility, so it will ignore what it doesn't understand, but it won't necessarily give you an error message. I just threw this example in to be sadistic. And to justify the four hours I spent tracking the bug down. Where did the stray characters come from? Your guess is as good as mine.

Here's the code: <FORM NAME="form2"> <H3>Form 2: This still won't work, but for a more common reason.</H3> <P><INPUT TYPE="checkBox" onClick="doSomething()" > Go ahead. Click. I mean it. </FORM>

The problem? JavaScript is case sensitive, so it doesn't know doSomething (duh!) is the same as DoSomething. This shows why I hate those "Computers for dummies" books. Sorry, but really, it's computers that are the dummies.

Here's the code: <FORM NAME="form3"> <H3> Form 3: This version actually works.</H3> <P><INPUT TYPE="checkBox" onClick="DoSomething()" > Go ahead. Click. I mean it. Please. </FORM>

Another thing to check for is missing parentheses after your function name. You always need parentheses, even if your function doesn't take any arguments.

Write HTML or Code to New Window

As if finding errors in straight code or HTML tags wasn't difficult enough, when you create a new document by enclosing commands in writeln() statements, it can be even harder to spot errors. One tip is to use the View Source option of your browser, so you can see what was actually generated. Press the button to generate the following code: function WriteCode(){ // This function opens a new window and writes HTML to it. document.writeln("<HTML>") document.writeln("<BODY>") document.writeln("Some stuff here, like possibly a link to the") document.writeln(" <A href = http://developer.netscape.com/library/documentation/index.html> + javascript reference site,") document.writeln("<HR>") document.writeln("... and then possibly some other stuff") document.writeln("</BODY>") document.writeln("</HTML>") document.close() } You're likely to easily spot several errors when you use the View Page Source option.