Most elements are contained within other elements. What actually gets the click? The bottom-most element. That’s important, because sometimes the <a> tag is not the bottom-most element. Try clicking on the two images to the right and left of the headline at the top of the page. The alert box will say that the URL for IMG is undefined, but those images are linked. The problem is that it’s the <img> tag that is getting the click—the <a> tag surrounds the <img> tag but the <img> tag is the bottom-most tag. The URL is stored on the <a> tag. If we’re going to do something special with the URL, we need to find the <a> tag first.
Change the manageLinks function to:
function manageLinks(event) {
var link = event.target;
//go up the family tree until we find the A tag
while (link.tagName != 'A') {
link = link.parentNode;
}
var url = link.href;
var tag = link.tagName;
window.alert("The url for " + tag + " is " + url);
return false;
}
Now, whenever you click on a link, the alert will tell you what URL applies to that object, even if (as for an <img> tag) the element you clicked on does not itself contain the href.
Find the A tag: Comments
The first new line in this version of the manageLinks function is a comment. JavaScript completely ignores all lines that begin with two slashes. We can use this to place comments in our script to remind us of what the script is doing. Whenever it isn’t immediately obvious what a section of the script is doing, you should add a comment to that section describing the purpose of those lines.
While loops
The second new line in this version of manageLinks is a while statement. Notice that the line with the while ends in an open curly bracket, and there is a new close curly bracket two lines below it. Just like a function, a while contains JavaScript code that only gets performed if special conditions are met. For functions, the special condition is that you call the function by name. For whiles, the special condition is that some condition is true. As long as that condition remains true, the lines between the opening and closing brackets of the while will loop, performing themselves over and over.
The condition is specified inside of the opening and closing parentheses. Here, our condition is that “link.tagName != ‘A’”. The characters “!=” mean “is not equal to”. Let’s take a look at how this condition is or isn’t met. If the visitor clicks on an <a> tag, the browser will check that condition and ask “link.tagName is not equal to A; is that true or false?” In that case, the condition is false: the visitor did click on an <a> tag, so the tagName is A.
If the visitor clicks on an <img> tag, what happens? The first time through, “link.tagName is not equal to A” is true: link.tagName is IMG, and IMG is not A. So the while’s code is performed for one loop. During that one loop, the variable “link” is set to its own parent node. If the <img> tag is contained within an <a> tag, its parent will be that <a> tag. So the second time through, “link.tagName is not equal to A” is false: link.tagName is A and A is A. The condition is false, so the while loop ends.
