Woopyalecris
New Member
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, Jasonp.s. This is the only error that is returned:\[code\]Warning: TypeError: function showTip does not always return a valueSource File: file:///G:/WEB%20215/Moodle%20Assignments/Assignment%206/Jason_McCoy_6/js.jsLine: 40\[/code\]HTML\[code\]<!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="http://stackoverflow.com/questions/12773214/css.css" rel="stylesheet" type="text/css" /> <script src="http://stackoverflow.com/questions/12773214/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>\[/code\]CSS\[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\]Javascript \[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 <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 if(arrPrepareTipsAnchors.onmouseover || arrPrepareTipsAnchors.onclick) { arrPrepareTipsAnchors = function() { showTip(this); return false; } } // Step 6: Bind the hideTip() function to the anchor tags' MOUSEOUT event if(arrPrepareTipsAnchors.onmouseout) { arrPrepareTipsAnchors = 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: Loop thru all the anchor tags for (var j=0; j<arrShowTipAnchors.length; j++) { // Step 10: When an onclick event for an anchor happens, cancel the default behavior of the link (i.e. the link does nothing when clicked) if(arrShowTipAnchors[j].onclick) { prepareTips(this.getAttribute("href")); return false; } //Step 11: 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 arrShowTipAnchors[j].classname === 'showTip'; var showTooltip = arrShowTipAnchors[j].this.getAttribute('title'); showTooltip = arrShowTipAnchors[j].onmouseover ? firstChild.nodeValue : firstChild.nodeValue; } } // Step 12: Create a separate function called hideTip() function hideTip(variable) { // Step 13: Scan the document looking for all anchor tags var arrHideTipAnchors = document.getElementsByTagName('a'); // Step 14: Loop thru all the anchor tags for(var k=0; k<arrHideTipAnchors.length; k++) { //Step 15: 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) { arrHideTipAnchors[k].classname = 'hideTip'; var hideTooltip = arrHideTipAnchors[k].this.getAttribute('title'); hideTooltip = arrHideTipAnchors.onmouseout ? null : null; } } }\[/code\]