Exception Handling in JavaScript: Using Multiple Exception Handlers - A practical example: trapping multiple error types
(Page 4 of 5 )
Having described the main features associated with JavaScript primary error types, what I’ll do next is write a simple function, which adds on the fly a bunch of links to the document tree by using some DOM methods. This function implements a single exception handler, and its definition looks like this:
function addLinks(){
// define links
try {
var links=new Array
('home.htm','profile.htm','products.htm','contact.htm');
for(var i=0;i<links.length;i++){
// create <a> elements
var as=document.createElement('a');
// add href property
as.href=links[i];
// add title property
as.title=links[i].replace(/.htm/,'');
// add link labels
as.appendChild(document.createTextNode(' '+as.title+' '));
// add links to document tree
document.body.appendChild(as);
}
}
catch(e){
var p=document.createElement('p');
p.appendChild(document.createTextNode('An exception was
thrown by the script. Error name :'+e.name+' Error
message :'+e.message));
document.body.appendChild(p);
}
}
// call function when page is loaded
window.onload=function(){
var W3C=document.getElementById&&document.
createElement&&document.getElementsByTagName;
if(W3C){
addLinks();
}
}
As I mentioned before, the “addLinks()” function appends dynamically some links to the document tree, defined through the “links” array, and sets up a single exception handler. Within the “catch()” block, the type of error is displayed by adding a paragraph, which is populated with the values of “name” and “message” Error’s object properties.
When the script is run, it outputs a group of regulars links and nothing else, because the code has been correctly executed. The script’s output is depicted below:

Now, let’s tweak the code a little bit and introduce some changes for seeing how the script reacts to them. So, firstly I’ll deliberately replace the line:
var as=document.createElement('a');
with this one:
var a=document.createElement('a');
After running the script, what I get on my browser is the following output:
An exception was thrown by the script. Error name :ReferenceError
Error message :as is not defined
Since I replaced the “as” variable with “a”, the function throws a reference error, because the script fails to find the referenced variable.
Next, let’s make the script trap a type error. To do this, I’ll simply replace the line:
var links=new Array
('home.htm','profile.htm','products.htm','contact.htm');
with this one:
var links=new Array
(1,'profile.htm','products.htm','contact.htm');
In this case the function launches a type error, which is trapped by the “catch” block, as follows:
An exception was thrown by the script. Error name :TypeError
Error message :links[i].replace is not a function
The raised error is pretty clear, because the “links” array’s first element has been set to be numeric, so the “replace()” method fails in replacing a string value.
By this point, you should have a clear idea of how the single exception handler works. By deliberately introducing some changes within the script, I caused several errors to be raised, and accordingly the handler has trapped them.
Now that a single exception handler was implemented on the first example, let’s move on and use the same script, this time using multiple handlers.
Next: Using multiple handlers: working with “if-else if” blocks >>
More JavaScript Articles
More By Alejandro Gervasio