How to Resolve JavaScript Syntax Errors for HTML5 and CSS3 Programming - dummies

How to Resolve JavaScript Syntax Errors for HTML5 and CSS3 Programming

By Andy Harris

The most common type of JavaScript error in HTML5 is a crash or syntax error, usually meaning you misspelled a command or used a function incorrectly. From the user’s point of view, browsers don’t usually tell you directly when a syntax error occurs, but simply sit there and pout. The best way to discover what’s going wrong is to call up the debugging console.

As soon as you discover a page not acting correctly, go to the debugging console and look at the Console tab. You’ll see error messages there, and you can often click on an error message to see the problem. As an example, take a look at the following code from syntaxError.html:

 function getPassword(){
  var correct "HTML5";
  var guess = ";
  while (guess != correct){
  guess = prompt("Password?");
  } // end while
  alert("You may proceed");
 } // end getPassword

Run the program in your browser, click the Guess the Password button, and the browser will seem to do nothing but glare at you insolently. However, if you activate the Debugging console, you’ll realize it’s telling you what it thinks is wrong.


It would be great if the debugger told you exactly what is wrong, but normally there’s a bit of detective work involved in deciphering error messages. It appears in this case that there are two errors, but they’re really the same thing. Click the link to the right of the first error and you’ll be taken to the Sources view with the offending line highlighted.


The error messages aren’t always as clear as they could be, but they are usually helpful in their own way. The error message here is “unexpected string.” That means the browser encountered a string value when it expected something else. That’s somewhat helpful, but the real strategy is to know that something is probably wrong with this line, and you need to look it over carefully.

At some point, you’ll probably realize that line 10 should have a single equals sign. Rather than var correct ”HTML5”, it should read var correct=”HTML5”. This was (as are most syntax errors) a problem caused by sloppy typing. Like most syntax errors, it’s kind of difficult to find (but much easier with the debugger).

After you find the error, it’s usually pretty easy to fix. Change the code in your editor and reload in the browser (with the F5 key) to see if your change fixes things.

Note that fixing the “unexpected string” error automatically resolves the “function not defined” error. This is pretty common because often one error cascades and causes other error messages. Generally you only need to worry about the topmost error on the list because resolving it may solve the other errors with no further work. (Of course, resolving one error may unmask other heretofore hidden errors, but this is less common.)