Notice one thing this function doesn’t do that it used to do: it no longer tells us that the URL for P is undefined. It doesn’t alert us on any click that doesn’t somehow bubble up to an <a> tag. We haven’t added any code to stop alerting us, so what happened? If you haven’t already noticed it in your error console, you should be seeing an error that “link has no properties” or “null value” when you try to click on a part of the page that has no link.
The “while” loop we’ve added goes up the HTML family tree until it finds an <a> tag. What happens if it never finds an <a> tag? Eventually, it reaches the top-most element and can’t go any further. The <html> tag’s parentNode is undefined. JavaScript is perfectly happy to deal with undefined values. But undefined values also have no properties, and trying to get a property that doesn’t exist is an error. Once link becomes undefined, link.tagName is an error. We need to fix that.
So let’s change the manageLinks function again.
function manageLinks(event) {
var link = event.target;
//go up the family tree until we find the A tag
while (link && link.tagName != 'A') {
link = link.parentNode;
}
if (link) {
var url = link.href;
var tag = link.tagName;
window.alert("The url for " + tag + " is " + url);
}
return false;
}
Now, the script will basically act the same way to the visitor—only showing the alert if they click on a link—but the errors will go away in the error console.
Compound conditionals
The conditional in the while parentheses is no longer just “link.tagName is not equal to A”. There’s now a “link &&” in front of that. Double ampersands in JavaScript mean “and”. They combine two different conditionals into one conditional. Here, the first conditional is just “link”. When a variable stands alone as a conditional, it is “true” if it contains something, and “false” if it contains nothing. Nothing can be zero, an empty string, or undefined. So as long as the link variable points to a valid HTML element, the link variable will evaluate to “true”. Once it is undefined, it will evaluate as false.
In logical statements, “false and anything” is always false: “false and true” is false, “false and false” is also false. So once link becomes undefined, JavaScript doesn’t even bother checking the rest of the conditional, and it never runs into the error that link.tagName doesn’t exist.
If statements
Just like functions and whiles, an if statement marks off lines of JavaScript inside curly brackets. Just like while, the if needs a conditional between parentheses. With an if, however, the conditional is only evaluated once. There is no looping. If the conditional is true, the if’s lines are performed. If the conditional is false, the if’s lines are not performed.
So in this example, if the link variable is undefined, we don’t bother trying to get the href and tagName off of it, nor do we pop up an alert box.
Related Pages
