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(
    "source",
    "obtain",
	...
    "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;
 11 
 12     spanId = parseInt( spanId.substr(1));
 13 
 14     instrDiv.style.display = "none";
 15     fullDiv.style.display = "none";
 16 
 17     defnTerm.replaceChild( 
 18         document.createTextNode( evt.target.data ),
 19         defnTerm.firstChild );
 20
 21     defnData.replaceChild( 
 22         document.createTextNode( vocabList[spanId] ),
 23         defnData.firstChild );
 24 
 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