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') ? "" : "";
}
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 anonclickoronmouseoverevent 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;
}