Answers to Exercises - Beginning JavaScript - page 640

When you click a tab, the code that handles the click event checks to see if the clicked tab's number
is different from the value contained in currentNum. If it is, then you know the clicked tab is different
from the currently active tab, and you can begin to go through the process of deactivating the current
tab and making the new tab the active tab.
var num = eSrc.id.substr(eSrc.id.lastIndexOf(“-”) + 1);
if (currentNum != num)
{
deactivateTab();
eSrc.className = “tabStrip-tab-click”;
showDescription(num);
currentNum = num;
}
The fi rst line in the if statement calls the deactivateTab() function, which deactivates the current
tab (you'll look at it later). The className property of the tab is changed to refl ect that it was clicked,
the description is added to the page, and the currentNum variable is changed to contain the value of
the new active tab's number.
Now turn your attention to the deactivateTab() function. Its job is to remove the currently active
tab's description from the page and change the active tab's style back to normal.
function deactiveTab()
{
var descContainer = document.getElementById(“descContainer”);
var descEl = document.getElementById(“tabStrip-desc-” + currentNum);
The fi rst line of his function gets the <div/> element with an id of descContainer, and the second
line attempts to locate the description element by using the id value the showDescription() function
assigned it.
The word “attempts” is key here; remember that currentNum was initialized with a value of 0, and
there is no tab with a number of 0. Yet when you fi rst click any tab, deactivateTab() is called
because 0 does not equal to the clicked tab's number. So the fi rst time you click a tab, your code
attempts to fi nd an element with an id value of tabStrip-desc-0, which obviously doesn't exist,
and getElementById() returns null if it cannot fi nd the element with the specifi ed id. This is a
potential problem because the browser will throw an error if you attempt to do anything with the
descEl variable if it is null.
The solution to this problem is rather simple; check if the descEl variable has a value, and only
perform operations when it does.
if (descEl)
{
descContainer.removeChild(descEl);
document.getElementById(“tabStrip-tab-”
+ currentNum).className = “tabStrip-tab”;
}
}