Home Page -> DOM Tutorials -> Dynamic Text -> The gloss() function

The gloss() function

We first create a list of the English translations for each glossary term. A list of Spanish words isn't necessary; we'll see why later.

vocabList = new Array(
    "by means of",
    "through (by means of)"

We use this array in the gloss() function, which is shown below. The line numbers are just for reference in the explanation.

  1 function gloss( evt )
  2 {
  3     var defnList = document.getElementById( "dlist" );
  4     var defnTerm = document.getElementById( "dterm" );
  5     var defnData = document.getElementById( "ddefn" );
  6     var glossDiv = document.getElementById( "glossDiv" );
  7     var instrDiv = document.getElementById( "instructionDiv" );
  8     var fullDiv = document.getElementById( "fullDiv" );
  9     var owner = findOwner( evt );
 10     var spanId = owner.attributes.getNamedItem("id").nodeValue;
 12     spanId = parseInt( spanId.substr(1));
 14     instrDiv.style.display = "none";
 15     fullDiv.style.display = "none";
 17     defnTerm.replaceChild( 
 18         document.createTextNode( evt.target.data ),
 19         defnTerm.firstChild );
 21     defnData.replaceChild( 
 22         document.createTextNode( vocabList[spanId] ),
 23         defnData.firstChild );
 25     glossDiv.style.display = "block";
 26 }
Lines 3-8
Get references to all the <div>s that we'll need
Lines 9-11
Determine which <span> was clicked, and extract its number from the id.
Lines 14-15
Make sure that the instructions and the full translation are hidden.
Lines 17-19
Replace the text in the <dt> tag's first child by a new text node, whose contents are the same as the data in the <span> that we clicked. We do this for two reasons: first, it means we don't have to make an array to hold the Spanish terms -- we just take them straight from the HTML. Second, creating a text node with the “ampersand-notation” (like &ntilde) doesn't work properly in Mozilla.
Lines 21-23
Replace the text in the <dd> tag's first child by a new text node whose contents are the appropriate English term from the vocabList array.
Line 25
Make the <div> that contains the definition list visible.

  Modifying a Node  Index A Philosophical Interlude