Question

我必须遵守该作业的作业。请阅读javascript代码顶部的注释，以查看我对此作业的限制。功能上大多数都是非常好的布局和评论，但它在页面加载时不起作用。我已经包含了我的HTML，CSS和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') ? "" : "";
}

Answer 1

我们来看看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;
    }
}

现在让我们将其分解为各个部分。

从arrPrepareTipsAnchors[i]开始是一个数组元素 - 在这种情况下，它指向页面上的<a>元素，在此代码执行时，当前没有事件处理程序绑定到它（由于没有内联事件处理程序，HTML页面中没有<script>标记等）。事件处理程序存储为元素的属性，例如onclick，onmouseover等。如果我们对名为element的变量中的元素有引用，那么element.onclick会引用onclick事件处理函数（在该元素上触发click事件时运行的函数）。

我们还有一个if语句，因此我们期望条件返回true或false。在这种情况下，我们的条件是：

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

如上所述，这些属性引用相应的事件处理函数 - 在本例中是为click和mouseover事件执行的函数。但是，我们还说它还没有绑定到元素的任何事件处理程序，因此这两个属性都是undefined。有了这个，我们的条件基本上变成了：

undefined || undefined

在JavaScript中，undefined被视为“假名”，因此条件永远不会评估为true（false或false始终为false }）并且身体永远不会被执行。

但是，为了完整起见，我们来看看if语句中的代码：

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

如上所述，arrPrepareTipsAnchors[i]是一个数组元素 - 它包含（指向）一个值。但是，我们使用=（赋值）运算符，因此我们为该数组元素分配一个新值。具体来说，我们正在分配一个匿名函数。

如果我们将所有这些结合在一起，我们可以说整条代码可以这样描述：

如果arrPrepareTipsAnchors[i]引用的DOM元素设置了onclick或onmouseover事件处理程序，请使用匿名函数替换数组中的此元素。

我怀疑你想要的更接近以下内容：

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

Javascript：仅使用带有函数和事件的外部文件

1 个答案: