-3
我有一份必須遵循的信件。請閱讀javascript代碼頂部的註釋以查看我對此作業的限制。大部分的功能都是非常好的佈局和評論，但在頁面加載時它不起作用。我已經包含了我的HTML，CSS和JavaScript。在給出答案之前，請閱讀javascript頂部的註釋，以便您的建議不會超出我的限制。對不起，如果我對這件事很生氣，我不是故意的。感謝大家的幫助。謝謝，傑森Javascript：只能使用具有功能和事件的外部文件
p.s.這是返回的唯一錯誤：
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);
}
}
}
*更新的JavaScript（只是代碼添加，無評論）*
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') ? "" : "";
}
＃1是一個Q＆A網站 - 的Q代表的問題，所以有一些期望，問題實際上會問。事實並非如此 - 您還沒有告訴我們您要解決的問題是什麼，您遇到的問題是什麼等等。您已經發布了一些代碼，這是一個好的開始，並且是一個錯誤消息，這也是有用的，但仍然缺少很多信息。另外，請看代碼註釋爲步驟5和步驟6： - 它應該做什麼（基於註釋）根本不是代碼實際執行的內容。 –
我的問題是：我如何獲得功能和事件的工作。截至目前，他們不工作。如何在加載頁面後單擊鏈接時不做任何事情，如何將錨標記的標題屬性更改爲鼠標懸停事件上標記之間的文本，如何獲取工具提示在鼠標事件中消失？ – HoppedUpDesigns