JavaScript：仅在外部JavaScript文件中处理onclick、onmouseover和onmouseout函数

因此，我必须在各种情况下显示普通ole工具提示。我必须使用onclick事件取消URL链接的默认行为，在mouseover事件上显示工具提示，在mouseout事件上隐藏工具提示。到目前为止，我将包括我所有的HTML、CSS和JavaScript代码。这只能在外部JavaScript文件中完成（即，根本无法更改HTML或CSS）。我也不能使用innerHTML（必须使用JavaScript最佳实践）。我已经尽了最大的努力编写代码（我对JavaScript真的很陌生）。这些功能目前都不起作用。我必须有3个函数，它们在Javascript中以正确的方式排列（我认为）。好了，别再唠叨了，下面是代码：

HTML

JavaScript

// *** Use JavaScript best practices ***
// *** 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 ***

// 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 arrAnchors = document.getElementsByTagName('a');

    // Step 4: Handle browsers that DON'T SUPPORT EITHER CSS OR JAVASCRIPT. 
    // *** If this is the case, the tooltips are hidden and the links open to the Wikipedia pages ***
    if(!document.getElementsByTagName) return false;

    //*** If the browser supports both CSS and JavaScript, the prepareTips() function does the following: ***

    // Step 5: Loop thru all the anchor tags and assigning the events to be handled for all of the links/tooltips
    for (var i=0; i<arrAnchors.length; i++) {

        // Step 6: Bind the showTip() function to the <span> tags' MOUSEOVER event
         arrAnchors.onmouseover = showTip;

        // Step 7: Bind the hideTip() function to the <span> tags' MOUSEOUT event
         arrAnchors.onmouseout = hideTip;

        // Step 8: Bind the showTip() function to the onclick event
        arrAnchors.onclick = showTip;
     }          
}

// *** NOTE: Tooltip triggers are anchor tags and contain the class "tip" ***
// *** NOTE: The .tip class is applied without the use of JavaScript ***
// *** NOTE: The .tip span class formats the tooltip spans but hides them by default.  This is applied without JavaScript ***

// Step 9: Create a separate function called showtip()
function showTip() {

    // Step 10: When an onclick event for a link happens, cancel the default behavior of the link.
    // *** The browser does not go to the URL value contained in the HREF ***
    // *** So the links do nothing when clicked (i.e. return false) instead of going to the Wikipedia page of the guitar player ***
      var arrLinks = document.getElementsByTagName('a');

          for (var i=0; i<arrLinks.length; i++) {
            arrLinks[i].onlick = function() {
            return false;
        }

    // Step 11: The showtip() function changes the anchor class to ".tip span.showTip" located in the CSS file 
    // *** The .tip span.showTip class in the CSS file simply overrides the display property, showing the tooltip span as a block element ***
    // *** This is to be applied using JavaScript (no other properties of the .tip span.showTip will be changed) ***
          arrLinks[i].className === 'showTip';

    // Step 12: Show the associated tooltip when an onmouseover event for a link occurs
    // *** The tooltip that is displayed is the text between the <span>Tooltip text here</span> tags ***
    // *** For example: The tooltip to be displayed when the mouse is hovered over the Randy Rhoads link is: "Randy Rhoads blah blah blah" ***
    // *** The <span> is a child of the anchor (<a>) tags ***
    // *** This means they can be accessed in CSS with a descendant selector .tip span ***
          var tooltip = arrLinks[i].setAttribute('title', arrLinks[i].childName['span'].nodeValue);
     }
}

// Step 13: Create a separate function called hideTip()
function hideTip() {

    // Step 14: The showtip() function changes the anchor class to ".tip span.hideTip" located in the CSS file 
    // *** The .tip span.hideTip class in the CSS file sets the display property back to none, hiding the tooltip ***
      var hideTips = document.getElementsByTagName('a');

    // Step 15: Hide the associated tooltip when the mouseout event for the links occurs.
    // *** The <span> is a child of the anchor (<a>) tags ***
    // *** This means they can be accessed in CSS with a descendant selector .tip span ***
      hideTips[i].className === 'hideTip';
}

//***使用JavaScript最佳实践***
//***这意味着HTML和CSS根本不可编辑***
//***不向HTML添加任何标记***
//***不向HTML添加任何内联JavaScript***
//***CSS不受影响，不允许更改***
//步骤1：创建ONLOAD事件，以便在页面完成加载后运行函数prepareTips（）
window.onload=prepareTips；
//步骤2：声明prepareTips（）函数
函数prepareTips（）{
//步骤3：扫描文档以查找所有锚定标签
var arrAnchors=document.getElementsByTagName（'a'）；
//步骤4：处理不支持CSS或JAVASCRIPT的浏览器。
//***如果是这种情况，则隐藏工具提示，并打开指向Wikipedia页面的链接***
如果（！document.getElementsByTagName）返回false；
//***如果浏览器同时支持CSS和JavaScript，则prepareTips（）函数将执行以下操作：***
//步骤5：循环遍历所有定位标记，并为所有链接/工具提示指定要处理的事件
对于（var i=0；i快速浏览一下就会发现，当浏览器不能使用JS/CSS时，返回false

，但当浏览器不能使用JS/CSS时，返回true。这会导致您遇到问题。我猜您应该做些什么（不仅仅是

返回false

）当它无法处理JS/CSS，但您试图作为占位符返回时

---

旁注：如果浏览器不支持JS…它应该如何执行JS来确定它是否支持JS？

我假设您正在谈论从span text在工具提示上显示文本，而不是将文本输入span以在锚定标记的工具提示上显示。 你没有在标题栏中输入span文本，你甚至没有在onload函数中正确地提到函数。你会更好地了解下面代码中的小错误和更正。请注释你的js代码，并将此js代码放入其中

// *** Use JavaScript best practices ***
// *** 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 ***

// 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 arrAnchors = document.getElementsByTagName('a');

    // Step 4: Handle browsers that DON'T SUPPORT EITHER CSS OR JAVASCRIPT. 
    // *** If this is the case, the tooltips are hidden and the links open to the Wikipedia pages ***
    if(!document.getElementsByTagName) return false;

    //*** If the browser supports both CSS and JavaScript, the prepareTips() function does the following: ***

    // Step 5: Loop thru all the anchor tags and assigning the events to be handled for all of the links/tooltips
    for (var i=0; i<arrAnchors.length; i++) {

        // Step 6: Bind the showTip() function to the <span> tags' MOUSEOVER event
         arrAnchors.onmouseover = showTip();

        // Step 7: Bind the hideTip() function to the <span> tags' MOUSEOUT event
         arrAnchors.onmouseout = hideTip();

        // Step 8: Bind the showTip() function to the onclick event
        arrAnchors.onclick = showTip();
     }          
}

// *** NOTE: Tooltip triggers are anchor tags and contain the class "tip" ***
// *** NOTE: The .tip class is applied without the use of JavaScript ***
// *** NOTE: The .tip span class formats the tooltip spans but hides them by default.  This is applied without JavaScript ***

// Step 9: Create a separate function called showtip()
function showTip() {

    // Step 10: When an onclick event for a link happens, cancel the default behavior of the link.
    // *** The browser does not go to the URL value contained in the HREF ***
    // *** So the links do nothing when clicked (i.e. return false) instead of going to the Wikipedia page of the guitar player ***
      var arrLinks = document.getElementsByTagName('a');

          for (var i=0; i<arrLinks.length; i++) {
            arrLinks[i].onlick = function() {
            return false;
        }

    // Step 11: The showtip() function changes the anchor class to ".tip span.showTip" located in the CSS file 
    // *** The .tip span.showTip class in the CSS file simply overrides the display property, showing the tooltip span as a block element ***
    // *** This is to be applied using JavaScript (no other properties of the .tip span.showTip will be changed) ***
          arrLinks[i].className === 'showTip';

    // Step 12: Show the associated tooltip when an onmouseover event for a link occurs
    // *** The tooltip that is displayed is the text between the <span>Tooltip text here</span> tags ***
    // *** For example: The tooltip to be displayed when the mouse is hovered over the Randy Rhoads link is: "Randy Rhoads blah blah blah" ***
    // *** The <span> is a child of the anchor (<a>) tags ***
    // *** This means they can be accessed in CSS with a descendant selector .tip span ***
          arrLinks[i].setAttribute('title', arrLinks[i].childNodes[1].innerHTML);
     }
}

// Step 13: Create a separate function called hideTip()
function hideTip() {

    // Step 14: The showtip() function changes the anchor class to ".tip span.hideTip" located in the CSS file 
    // *** The .tip span.hideTip class in the CSS file sets the display property back to none, hiding the tooltip ***
      var hideTips = document.getElementsByTagName('a');

    // Step 15: Hide the associated tooltip when the mouseout event for the links occurs.
    // *** The <span> is a child of the anchor (<a>) tags ***
    // *** This means they can be accessed in CSS with a descendant selector .tip span ***
      hideTips[i].className === 'hideTip';

//***使用JavaScript最佳实践***
//***这意味着HTML和CSS根本不可编辑***
//***不向HTML添加任何标记***
//***不向HTML添加任何内联JavaScript***
//***CSS不受影响，不允许更改***
//步骤1：创建ONLOAD事件，以便在页面完成加载后运行函数prepareTips（）
window.onload=prepareTips；
//步骤2：声明prepareTips（）函数
函数prepareTips（）{
//步骤3：扫描文档以查找所有锚定标签
var arrAnchors=document.getElementsByTagName（'a'）；
//步骤4：处理不支持CSS或JAVASCRIPT的浏览器。
//***如果是这种情况，则隐藏工具提示，并打开指向Wikipedia页面的链接***
如果（！document.getElementsByTagName）返回false；
//***如果浏览器同时支持CSS和JavaScript，则prepareTips（）函数将执行以下操作：***
//步骤5：循环遍历所有定位标记，并为所有链接/工具提示指定要处理的事件
对于（var i=0；i为什么要使用“css”和“javascript”来显示工具LTIP和隐藏工具提示。在html中显示url上的工具提示非常简单。只需更改我在下面编写的代码中的几行即可。您不需要使用css和javascript

<a href="http://en.wikipedia.org/wiki/Randy_Rhoads" title="go to randy rhoad wikipedia  page">Randy Rhoads
<a href="http://en.wikipedia.org/wiki/Ty_Tabor" title="go to Tv Tabor wikipedia page">Ty Tabor
<a href="http://en.wikipedia.org/wiki/Andy_Timmons" title="go to Andy Timmons wikipedia page">Andy Timmons
<a href="http://en.wikipedia.org/wiki/Joe_Bonamassa" title="go to Joe Bonamassa wikipedia page">Joe Bonamassa

Randy Rhoads
泰塔博尔
吉他大师
乔·博纳马萨
这是实际的JavaScript代码吗？星号
*
正在使语法无效。此外，
==
是一个比较运算符，而不是赋值运算符。更重要的是，在运行代码时发布错误消息（检查浏览器的JavaScript错误控制台）。很抱歉，当我使用文本编辑器对文本应用粗体时，添加了额外的星号。我收到的唯一错误消息是：“TypeError:function prepareTips并不总是返回值”我认为这里有很多错误代码，但我不知道如何修复这些错误。我不明白有人想重新发明轮子。当你在javascript工具提示解决方案上搜索时，你会找到你想要的。另外，尝试使用jQuery，它会让你的生活分配更容易，并且有更多的插件可用。不能吗还没有使用jQuery…这是为了上课…我们还没有学习jQuery…我是一个完全的新手非常好的观点：）我所知道的是，在课堂上，我的老师说如果（！document.getElementByID）或者类似的东西，然后返回false。这是我唯一的方法know@HoppedUpDesigns你的老师很可能是一个无知的新手，只会做一本由同样业余的作家写的书中所说的事情。你只需要做我在大学里做的事情：按照他们在课堂上展示给你的方式做，然后在课堂上用正确的方式做我根本无法更改HTML或CSS（请参阅Javascript代码顶部的注释）。所有操作都必须在外部Javascript文件中完成。
// *** Use JavaScript best practices ***
// *** 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 ***

// 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 arrAnchors = document.getElementsByTagName('a');

    // Step 4: Handle browsers that DON'T SUPPORT EITHER CSS OR JAVASCRIPT. 
    // *** If this is the case, the tooltips are hidden and the links open to the Wikipedia pages ***
    if(!document.getElementsByTagName) return false;

    //*** If the browser supports both CSS and JavaScript, the prepareTips() function does the following: ***

    // Step 5: Loop thru all the anchor tags and assigning the events to be handled for all of the links/tooltips
    for (var i=0; i<arrAnchors.length; i++) {

        // Step 6: Bind the showTip() function to the <span> tags' MOUSEOVER event
         arrAnchors.onmouseover = showTip();

        // Step 7: Bind the hideTip() function to the <span> tags' MOUSEOUT event
         arrAnchors.onmouseout = hideTip();

        // Step 8: Bind the showTip() function to the onclick event
        arrAnchors.onclick = showTip();
     }          
}

// *** NOTE: Tooltip triggers are anchor tags and contain the class "tip" ***
// *** NOTE: The .tip class is applied without the use of JavaScript ***
// *** NOTE: The .tip span class formats the tooltip spans but hides them by default.  This is applied without JavaScript ***

// Step 9: Create a separate function called showtip()
function showTip() {

    // Step 10: When an onclick event for a link happens, cancel the default behavior of the link.
    // *** The browser does not go to the URL value contained in the HREF ***
    // *** So the links do nothing when clicked (i.e. return false) instead of going to the Wikipedia page of the guitar player ***
      var arrLinks = document.getElementsByTagName('a');

          for (var i=0; i<arrLinks.length; i++) {
            arrLinks[i].onlick = function() {
            return false;
        }

    // Step 11: The showtip() function changes the anchor class to ".tip span.showTip" located in the CSS file 
    // *** The .tip span.showTip class in the CSS file simply overrides the display property, showing the tooltip span as a block element ***
    // *** This is to be applied using JavaScript (no other properties of the .tip span.showTip will be changed) ***
          arrLinks[i].className === 'showTip';

    // Step 12: Show the associated tooltip when an onmouseover event for a link occurs
    // *** The tooltip that is displayed is the text between the <span>Tooltip text here</span> tags ***
    // *** For example: The tooltip to be displayed when the mouse is hovered over the Randy Rhoads link is: "Randy Rhoads blah blah blah" ***
    // *** The <span> is a child of the anchor (<a>) tags ***
    // *** This means they can be accessed in CSS with a descendant selector .tip span ***
          arrLinks[i].setAttribute('title', arrLinks[i].childNodes[1].innerHTML);
     }
}

// Step 13: Create a separate function called hideTip()
function hideTip() {

    // Step 14: The showtip() function changes the anchor class to ".tip span.hideTip" located in the CSS file 
    // *** The .tip span.hideTip class in the CSS file sets the display property back to none, hiding the tooltip ***
      var hideTips = document.getElementsByTagName('a');

    // Step 15: Hide the associated tooltip when the mouseout event for the links occurs.
    // *** The <span> is a child of the anchor (<a>) tags ***
    // *** This means they can be accessed in CSS with a descendant selector .tip span ***
      hideTips[i].className === 'hideTip';

<a href="http://en.wikipedia.org/wiki/Randy_Rhoads" title="go to randy rhoad wikipedia  page">Randy Rhoads
<a href="http://en.wikipedia.org/wiki/Ty_Tabor" title="go to Tv Tabor wikipedia page">Ty Tabor
<a href="http://en.wikipedia.org/wiki/Andy_Timmons" title="go to Andy Timmons wikipedia page">Andy Timmons
<a href="http://en.wikipedia.org/wiki/Joe_Bonamassa" title="go to Joe Bonamassa wikipedia page">Joe Bonamassa