Javascript: only use external file with functions and events

Question

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.s. This is the only error that is returned:

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

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Tool Tips</title>
  <link href="css.css" rel="stylesheet" type="text/css" />
  <script src="js.js" type="text/javascript"></script>
</head>

<body>

  <h1>Tool Tips</h1>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  <a href="http://en.wikipedia.org/wiki/Randy_Rhoads" class="tip">Randy Rhoads
  <span> Randy Rhoads blah blah blah</span></a>Sed tincidunt pulvinar elit, ac porta dolor feugiat. 
  <a href="http://en.wikipedia.org/wiki/Ty_Tabor" class="tip">Ty Tabor
  <span> Ty Tabor blah blah blah</span></a>Nunc quis eros ac ante convallis pharetra. 
  <a href="http://en.wikipedia.org/wiki/Andy_Timmons" class="tip">Andy Timmons
  <span> Andy Timmons blah blah blah</span></a>In nec justo libero, a convallis quam.</p>

</body>
</html>

CSS

/* 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;
}

Javascript

// *** 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 <SCRIPT> 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<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 <span> childNode of each anchor
    for (j=0; j<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<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);
        }
    }
}

* Updated Javascript (just the code added, no comments) *

window.onload = prepareTips;

var anchors = document.getElementsByTagName('a');

function prepareTips() {

    if(!document.getElementsByTagName('a')) return false;

    for(var i=0; i<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') ? "" : "";
}

Stackoverflow is a Q&A site - the Q stands for question, so there's some expectation that a question will actually be asked. That's not the case here - you haven't told us what the problem you're trying to solve is, what the issues you're having are, etc. You've posted some code, which is a good start, and an error message, which is also useful, but there's still a lot of information missing. Also, look at the code commented as Step 5: and Step 6: - what it's supposed to do (based on the comments) isn't at all what the code actually does. — Anthony Grist, Oct 07 '12 at 22:07
My question is: How do I get the functions and events to work. As of now, they don't work. How do I get the links to do nothing when then are clicked after the page loads, how do I change the title attribute of the anchor tag to the text that is between the tags on a mouseover event, how do I get the tooltip to disappear on a mouseout event? — HoppedUpDesigns, Oct 07 '12 at 22:26

score 0 · Accepted Answer · answered Oct 07 '12 at 22:42

Let's take a look at Step 5:

// Step 5: Bind the showTip() function to the anchor tags' MOUSEOVER and ONCLICK events
if (arrPrepareTipsAnchors[i].onmouseover || arrPrepareTipsAnchors[i].onclick) {
    arrPrepareTipsAnchors[i] = function() {
        showTip(this);
        return false;
    }
}

Now let's break that down into individual parts.

To start with arrPrepareTipsAnchors[i] is an array element - in this case, it points to an <a> element on your page, which will have no event handlers currently bound to it at the time this code executes (due to there being no inline event handlers, no <script> tags in the HTML page, etc). Event handlers are stored as properties of elements, such as onclick, onmouseover, etc. If we have a reference to an element in a variable named element, then element.onclick would refer to the onclick event handler function (the function to run when a click event is fired on that element).

We also have an if statement, so we're expecting the condition to return true or false. In this case, our condition is:

arrPrepareTipsAnchors[i].onmouseover || arrPrepareTipsAnchors[i].onclick

As we covered above, those properties refer to the corresponding event handler functions - in this case, the functions to execute for the click and mouseover events. However, we also said that it doesn't yet have any event handlers bound to the elements, so both of those properties will be undefined. With that, our condition essentially becomes:

undefined || undefined

In JavaScript, undefined is considered "falsey," so that condition will never evaluate to true (false OR false is always going to be false) and the body will never be executed.

However, for the sake of completeness, let's take a look at the code inside the if statement:

arrPrepareTipsAnchors[i] = function() {
    showTip(this);
    return false;
}

As above, arrPrepareTipsAnchors[i] is an array element - it contains (points to) a value. However, we're using the = (assignment) operator, so we're assigning a new value to that array element. Specifically, we're assigning an anonymous function.

If we join all of that together, we can say that the entire piece of code can be described thusly:

If the DOM element referenced by arrPrepareTipsAnchors[i] has either an onclick or onmouseover event handler set, replace this element in the array with an anonymous function.

I suspect what you wanted was something closer to the following:

arrPrepareTipsAnchors[i].onmouseover = arrPrepareTipsAnchors[i].onclick = function() {
    showTip(this);
    return false;
}

I have updated the code and made some changes but the onmouseover and onmouseout events are not working. Can you look at the code and see what I am doing wrong? — HoppedUpDesigns, Oct 07 '12 at 23:22
@HoppedUpDesigns The iteration over all of the `` elements in your `showTip()` function seems unnecessary to me; you already have a reference to the element that the event was triggered on being passed to that function. You're also again checking an event handler property in an `if` statement, except now they're *always* going to evaluate to `true` because they'll be functions. As a result `showTip()` is always going to execute the body of the first `if` statement, `return true` and never do anything else. — Anthony Grist, Oct 07 '12 at 23:32
I understand what you are saying Anthony but if I take the onclick out of the if and assign it to an anonymous function, the link opens which is not what I want to happen. And putting the onmouseover and onmouseout events in anonymous functions doesn't work either. I am guessing that I am using the wrong node values and variable references but I'm at a loss. — HoppedUpDesigns, Oct 07 '12 at 23:50
@HoppedUpDesigns You want to be doing neither of those things. When `showTip()` is executing you're already handling either an `onclick` or `onmouseover` event, so you don't need (or want) to look at either of those properties. What you want to do is look at the event object itself and determine the type of event you're handling. — Anthony Grist, Oct 07 '12 at 23:58
That doesn't make a lot of sense to me. I am a beginner and this concept is very confusing to me. I have been working all day on this and I am getting nowhere. I have added my stripped down code without any comments, just the bare minimum code for the functions. Maybe you can look at that and give me a hint as to what I am doing wrong. — HoppedUpDesigns, Oct 08 '12 at 02:42

Javascript: only use external file with functions and events

1 Answers1