JavaScript Try... Catch

The more JavaScript you code the more errors you'll encounter. This is a fact of life in any programming environment. Nobody's perfect and, once your scripts become more complex, you'll find there are sometimes scenarios that result in an error that you didn't think of.

JavaScript errors on web pages can scare your visitors away. How many times have you encountered a web page with errors, only to click the "back" button?

OK, so you can't always prevent errors from occuring, but you can do something about them. The JavaScript "Try... Catch" statement helps you handle errors in a "nice" way.

To use the Try... Catch statement, you take any code you think could potentially result in an error, and wrap it within the "try" statement. You then code what you want to happen in the event of an error and wrap that in a "catch" statement.

Code without a Try... Catch statement:

Code
<script type="text/javascript"> <!-- alert("My bank balance is $" + myBankBalance); //--> </script>

The above code will result in an error. This is because the variable "myBankBalance" hasn't been declared yet.

Code with a Try... Catch statement:

Code	Result
<script type="text/javascript"> <!-- function showBankBalance() { try { alert("My bank balance is $" + myBankBalance); } catch(err) { alert("Sorry, an error has occurred. We will fix the problem as soon as we get a pay rise!"); } } //--> </script> <input type="button" onclick="showBankBalance();" value="Show My Bank Balance!" />

The above code will hide the error and present something more user friendly to the user. This is because the code with the error was wrapped inside a "try" statement. And, because there was an error, the browser outputs whatever is between the "catch" statement.

JavaScript Tutorial

JavaScript Reference

JavaScript Examples

JavaScript Try... Catch

Code without a Try... Catch statement:

Code with a Try... Catch statement:

Enjoy this page?

HTML/MARKUP

CSS & DESIGN

SCRIPTING

DATABASE

WEB HOSTING