title: Javascript: only use external file with functions and events
body: <p>I have an assignment that MUST be followed to the letter.  Please read the comments at the top of the javascript code to see the restrictions that I have for this assignment.  Most of the functionally is very well laid out and commented but it doesn't work when the page is loaded.  I have included my HTML, CSS and JavaScript.  Please read the comments at the top of the javascript before giving an answer so that your suggestion doesn't fall outside of my restrictions.  Sorry if I am being a jerk about this, I don't mean to be.  Thank you all for your help. Thanks, Jason</p>
  
  <p>p.s.  This is the only error that is returned:</p>
  
  <pre><code>Warning: TypeError: function showTip does not always return a value
  Source File: file:///G:/WEB%20215/Moodle%20Assignments/Assignment%206/Jason_McCoy_6/js.js
  Line: 40
  </code></pre>
  
  <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;Sed tincidunt pulvinar elit, ac porta dolor feugiat. 
    &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;Nunc quis eros ac ante convallis 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;In nec justo libero, a convallis 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 (ALL FUNCTIONALITY COMES FROM THE EXTERNAL JAVASCRIPT FILE) ***
  // *** 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 ***
  // *** CANNOT USE ANY JQUERY ***
  // *** CANNOT USE INNERHTML ***
  
  // 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 arrPrepareTipsAnchors = document.getElementsByTagName('a');
  
      // Step 4: Loop thru all the anchor tags
      for (var i=0; i&lt;arrPrepareTipsAnchors.length; i++) {
  
          // Step 5: Bind the showTip() function to the anchor tags' MOUSEOVER and ONCLICK events
          arrPrepareTipsAnchors[i].onmouseover = arrPrepareTipsAnchors[i].onclick = function() {
              showTip(this);
              return false;
          }
  
          // Step 6: Bind the hideTip() function to the anchor tags' MOUSEOUT event
          arrPrepareTipsAnchors[i].onmouseout = function() {
              hideTip(this);
              return false;
          }
      }               
  }
  
  // Step 7: Create a separate function called showTip()
  function showTip(anchor) {
      // Step 8: Scan the document looking for all anchor tags
      var arrShowTipAnchors = document.getElementsByTagName('a');
  
      // Step 9: If a anchor is clicked, the default behavior is canceled (i.e. the link does nothing)
      // Step 10: When a mouseover event occurs to an anchor: 
      //    1) The anchor's classname is changed from the default 'tip' class to the 'showTip' class as described in the CSS File
      //    2) The anchor's 'title' attribute is changed to the text that is in between the &lt;span&gt; childNode of each anchor
      for (j=0; j&lt;arrShowTipAnchors.length; j++) {
          if (arrShowTipAnchors[j].onclick) {
              anchor.getAttribute('href');
              return false;
          }
          if (arrShowTipAnchors[j].onmouseover) {
              anchor.lastChild.setAttribute('class', 'showTip');
              var showTooltip = anchor.lastChild.nodeValue;
              anchor.setAttribute('title', showTooltip);  
          }       
      }
  }
  
  // Step 11: Create a separate function called hideTip()
  function hideTip(anchor) {
  
      // Step 12: Scan the document looking for all anchor tags
      var arrHideTipAnchors = document.getElementsByTagName('a');
  
      // Step 13: Loop thru all the anchor tags
      for(var k=0; k&lt;arrHideTipAnchors.length; k++) {
          //Step 14: When a MOUSEOUT event occurs to an anchor: 
          //    1) The anchor's classname is changed from the default 'tip' class to the 'hideTip' class as described in the CSS File
          //    2) The anchor's 'title' attribute is set to null (i.e. the tooltip that appears on the MOUSEOVER disappears on the MOUSEOUT)
          if (arrHideTipAnchors[k].onmouseout) {
              anchor.lastChild.setAttribute('class', 'hideTip');
              var hideTooltip = "";
              anchor.setAttribute('title', hideTooltip);
          }
      }
  }
  </code></pre>
  
  <p><em><strong></em>* Updated Javascript (just the code added, no comments) <em>*</em></strong></p>
  
  <pre><code>window.onload = prepareTips;
  
  var anchors = document.getElementsByTagName('a');
  
  function prepareTips() {
  
      if(!document.getElementsByTagName('a')) return false;
  
      for(var i=0; i&lt;anchors.length; i++){
              anchors[i].onclick = showTip;
              anchors[i].onmouseover = showTip;
              anchors[i].onmouseout = hideTip;
      }
  }
  
  function showTip(variable) {
      this.setAttribute('href', '#');
      this.classname = 'showTip';
      this.getAttribute('title') ? this.lastChild.nodeValue : this.lastChild.nodeValue;
  }
  
  function hideTip(variable) {
      this.classname = 'hideTip';
      this.getAttribute('title') ? "" : "";
  }
  </code></pre>