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

Question

我有一个任务必须严格遵守。请阅读 javascript 代码顶部的注释，以了解我对此作业的限制。大多数功能的布局和注释都非常好，但是在加载页面时它不起作用。我已经包含了我的 HTML、CSS 和 JavaScript。请在给出答案之前阅读 javascript 顶部的评论，以免您的建议超出我的限制。对不起，如果我在这件事上是个混蛋，我不是故意的。感谢大家的帮助。谢谢，杰森

ps 这是返回的唯一错误：

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

score 0 · Accepted Answer

让我们来看看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>页面上的一个元素，在此代码执行时当前没有绑定到它的事件处理程序（由于没有内联事件处理程序，没有<script>标签HTML 页面等）。事件处理程序存储为元素的属性，例如onclick,onmouseover等。如果我们在名为的变量中引用了一个元素element，element.onclick则将引用onclick事件处理程序函数（在该元素上触发 click 事件时运行的函数）。

我们还有一个if语句，所以我们期望条件返回trueor false。在这种情况下，我们的条件是：

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

如上所述，这些属性指的是相应的事件处理函数——在这种情况下，为单击和鼠标悬停事件执行的函数。但是，我们还说它还没有绑定到元素的任何事件处理程序，因此这两个属性都是undefined. 有了这个，我们的条件基本上变成了：

undefined || undefined

在 JavaScript 中，undefined被认为是“错误的”，因此条件永远不会计算为true（falseORfalse永远是false）并且主体永远不会被执行。

不过，为了完整起见，让我们看一下if语句内部的代码：

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

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

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

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

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

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

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

1 回答 1

Related

Reference