title: JavaScript: handle onclick, onmouseover and onmouseout functions in an external JavaScript file ONLY
body: <p>So I have to display plain ole tooltips in various situations.  I have to deal with canceling the default behavior of URL links using an onclick event, show the tooltip on a mouseover event and hide the tooltip on a mouseout event.  I am going to include all my HTML, CSS and JavaScript code so far.  This has to be done only in an external JavaScript file (i.e. can't change the HTML or the CSS at all).  I also cannot use innerHTML (must use JavaScript best practices).  I have tried to write the code to the best of my ability (I am really new to JavaScript).  None of the functions work at the moment.  I have to have exactly 3 functions and they are laid out in the correct manner (I think) in the Javascript.  Ok, enough of my babbling here's the code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Tool Tips&lt;/title&gt;
  &lt;link href="css.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="js.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;h1&gt;Tool Tips
  &lt;/h1&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  
  &lt;a href="http://en.wikipedia.org/wiki/Randy_Rhoads" class="tip"&gt;Randy Rhoads
  &lt;span&gt; Randy Rhoads blah blah blah&lt;/span&gt;&lt;/a&gt; 
  ut augue risus.
  &lt;a href="http://en.wikipedia.org/wiki/Ty_Tabor" class="tip"&gt;Ty Tabor
  &lt;span&gt; Ty Tabor blah blah blah&lt;/span&gt;&lt;/a&gt; 
  cras pharetra. 
  &lt;a href="http://en.wikipedia.org/wiki/Andy_Timmons" class="tip"&gt;Andy Timmons
  &lt;span&gt; Andy Timmons blah blah blah&lt;/span&gt;&lt;/a&gt; proin mattis, s auctor. 
  &lt;a href="http://en.wikipedia.org/wiki/Joe_Bonamassa" class="tip"&gt;Joe Bonamassa
  &lt;span&gt; Joe Bonamassa blah blah blah&lt;/span&gt;&lt;/a&gt; Duis ac est quam.&lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>/* styles the anchors that have tooltips*/
  .tip {
      font-weight: bold;
      border-bottom: 1px dotted #333;
      cursor: help;
      position: relative;
      color: #600;
  }
  
  /* hides all tooltips by default on page load */
  .tip span {
      display: none;
  /* none of these matter now because the tooltips are hidden */
  /* when JS unhides the tooltips, these will already be in place */
      position: absolute;
      top: 1.5em;
      left: 0;
      background: #fff;
      border: 1px solid #333;
      width: 100px;
      padding: 5px;
      color: #333;
  }
  
  /* applied by JS to show tips */
  .tip span.showTip {
      display: block;
  }
  
  /* applied by JS to hide tips */
  .tip span.hideTip {
      display: none;
  }
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>// *** Use JavaScript best practices ***
  // *** This means that the HTML and the CSS are not to be edited at all ***
  // *** No &lt;script&gt; tags are to be added to the HTML ***
  // *** No inline JavaScript is to be added to the HTML ***
  // *** The CSS is to be left alone, no changes are allowed ***
  
  // Step 1: Create the ONLOAD event so that the function prepareTips() runs once the page has finished loading
  window.onload = prepareTips;
  
  // Step 2: Declare the prepareTips() function
  function prepareTips() {
  
      // Step 3: Scan the document looking for all anchor tags
      var arrAnchors = document.getElementsByTagName('a');
  
      // Step 4: Handle browsers that DON'T SUPPORT EITHER CSS OR JAVASCRIPT. 
      // *** If this is the case, the tooltips are hidden and the links open to the Wikipedia pages ***
      if(!document.getElementsByTagName) return false;
  
      //*** If the browser supports both CSS and JavaScript, the prepareTips() function does the following: ***
  
      // Step 5: Loop thru all the anchor tags and assigning the events to be handled for all of the links/tooltips
      for (var i=0; i&lt;arrAnchors.length; i++) {
  
          // Step 6: Bind the showTip() function to the &lt;span&gt; tags' MOUSEOVER event
           arrAnchors.onmouseover = showTip;
  
          // Step 7: Bind the hideTip() function to the &lt;span&gt; tags' MOUSEOUT event
           arrAnchors.onmouseout = hideTip;
  
          // Step 8: Bind the showTip() function to the onclick event
          arrAnchors.onclick = showTip;
       }          
  }
  
  // *** NOTE: Tooltip triggers are anchor tags and contain the class "tip" ***
  // *** NOTE: The .tip class is applied without the use of JavaScript ***
  // *** NOTE: The .tip span class formats the tooltip spans but hides them by default.  This is applied without JavaScript ***
  
  // Step 9: Create a separate function called showtip()
  function showTip() {
  
      // Step 10: When an onclick event for a link happens, cancel the default behavior of the link.
      // *** The browser does not go to the URL value contained in the HREF ***
      // *** So the links do nothing when clicked (i.e. return false) instead of going to the Wikipedia page of the guitar player ***
        var arrLinks = document.getElementsByTagName('a');
  
            for (var i=0; i&lt;arrLinks.length; i++) {
              arrLinks[i].onlick = function() {
              return false;
          }
  
      // Step 11: The showtip() function changes the anchor class to ".tip span.showTip" located in the CSS file 
      // *** The .tip span.showTip class in the CSS file simply overrides the display property, showing the tooltip span as a block element ***
      // *** This is to be applied using JavaScript (no other properties of the .tip span.showTip will be changed) ***
            arrLinks[i].className === 'showTip';
  
      // Step 12: Show the associated tooltip when an onmouseover event for a link occurs
      // *** The tooltip that is displayed is the text between the &lt;span&gt;Tooltip text here&lt;/span&gt; tags ***
      // *** For example: The tooltip to be displayed when the mouse is hovered over the Randy Rhoads link is: "Randy Rhoads blah blah blah" ***
      // *** The &lt;span&gt; is a child of the anchor (&lt;a&gt;) tags ***
      // *** This means they can be accessed in CSS with a descendant selector .tip span ***
            var tooltip = arrLinks[i].setAttribute('title', arrLinks[i].childName['span'].nodeValue);
       }
  }
  
  // Step 13: Create a separate function called hideTip()
  function hideTip() {
  
      // Step 14: The showtip() function changes the anchor class to ".tip span.hideTip" located in the CSS file 
      // *** The .tip span.hideTip class in the CSS file sets the display property back to none, hiding the tooltip ***
        var hideTips = document.getElementsByTagName('a');
  
      // Step 15: Hide the associated tooltip when the mouseout event for the links occurs.
      // *** The &lt;span&gt; is a child of the anchor (&lt;a&gt;) tags ***
      // *** This means they can be accessed in CSS with a descendant selector .tip span ***
        hideTips[i].className === 'hideTip';
  }
  </code></pre>