Search code examples
javascriptfunctionexternaldom-eventsonmouseover

Javascript get the nodeValue of the second child?

I have only one step to do and this assignment will be done.

The ONMOUSEOVER event should show the text that is between the span tags. Right now, it is showing the text right before the span tags(same as the link text). This is the firstChild, I need to get the next child as the title text for the ONMOUSEOVER. I just don't know how to access it.

So my question is: What do I put in the showTip function line that reads:

anchors[i].setAttribute('title', this.firstChild.nodeValue);

My HTML code and JavaScript code are below for reference.

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
<!-- TEXT FOR THE FIRST HOVER LINK IS BETWEEN THE <span> TAGS -->
<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
<!-- TEXT FOR THE SECOND HOVER LINK IS BETWEEN THE <span> TAGS -->
<span> Ty Tabor blah blah blah</span></a> cras pellentesque, ligula et mattis varius, orci urna pellentesque   augue, in consectetur quam magna non elit. Nunc quis eros ac ante convallis pharetra. 
<a href="http://en.wikipedia.org/wiki/Andy_Timmons" class="tip">Andy Timmons
<!-- TEXT FOR THE THIRD HOVER LINK IS BETWEEN THE <span> TAGS -->
<span> Andy Timmons blah blah blah</span></a>In nec justo libero, a convallis quam.</p>
<a href="http://en.wikipedia.org/wiki/Joe_Bonamassa" class="tip">Joe Bonamassa
<!-- TEXT FOR THE FOURTH HOVER LINK IS BETWEEN THE <span> TAGS -->
<span> Joe Bonamassa blah blah blah</span></a> Duis ac est luctus  massa commodo lobortis eu eu eros.
</p>

</body>
</html>

JAVASCRIPT

There are no comments in the JavaScript. HOWEVER: These are the restrictions for the exercise.

  1. Cannot make any changes to the CSS or HTML,
  2. All functions remain as is,
  3. Cannot use any jQuery or any other libraries,
  4. Cannot use innerHTML.

As note, the only line that is a problem is the last line of code in the showTip() function.

window.onload = prepareTips;

var anchors = document.getElementsByTagName('a');
var spans = document.getElementsByTagName('span');

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', '#');

    for(i=0; i<spans.length; i++) {
        this.classname = 'showTip';

            // *** THIS IS THE PROBLEM LINE ***
        anchors[i].setAttribute('title', this.firstChild.nodeValue);
    }
}
function hideTip(variable) {
    for(i=0; i<spans.length; i++) {
        this.classname = 'hideTip';
        anchors[i].setAttribute('title', "");
    }
}
Solution

  • There are often nodes that you are not aware of such as text nodes that contain carriage returns and comment notes that contain your comments. You often cannot just assume that the next node is what you want it to be.

    It is much more reliable to fetch a specific element by some element criteria such as the first child element that is a span tag.

    var firstSpan = this.getElementsByTagName("span")[0];
anchors[i].setAttribute('title', firstSpan);