CODEWITHSUNDEEP
javascripthtmltagsmouseover
user2174725
user2174725

Reputation: 73

How do i get the text of the link my mouse is hovering over?

I have the following links across my HTML-page, all with different urls and different text in between the link tags.

<a onmouseover="myFunction()" class="green" href="url.com">word here</a>

The myFunction is a script that shows the definition of the word. I just have to figure out how to get this word.

I want to get the word my mouse is hovering over, and not of the other word(s) at the page between tags with the "green" class.. Is there any way to just get the current word between the tags my mouse is hovering over?

Upvotes: 0

Views: 2618

Answers (3)

David Thomas
David Thomas

Reputation: 253318

Simply pass the node to the function:

<a onmouseover="myFunction(this)" class="green" href="url.com">word here</a>

And, in your function:

myFunction(nodeReference){
    var text = nodeReference.innerText || nodeReference.textContent;
    console.log('the text is: ' + text);
}

JS Fiddle demo.

Or, you could, if you prefer simply pass the text:

<a onmouseover="myFunction(this.innerText || this.textContent)" class="green" href="url.com">word here</a>

Which allows your function to have direct access to the text:

myFunction(elementText){
    console.log('the text is: ' + elementText);
}

JS Fiddle demo.

Even better, though, is to remove your event-handling from the inline-handlers, if only for the ease of updates/maintenance, using the following approach:

function myFunction(nodeReference){
    var text = nodeReference.innerText || nodeReference.textContent;
    console.log('The text is: ' + text);
}

var As = document.links;

for (var i = 0, len = As.length; i<len; i++){
    As[i].onmouseover = function(e){
        myFunction(this);
    };
}

<a class="green" href="url.com">word here</a>

JS Fiddle demo.

As pointed out in the comments, below, it's unnecessary to wrap the function-call in an anonymous function, which allows, instead, to call like so:

function myFunction(evt){
    var text = this.innerText || this.textContent;
    console.log('The ' + evt.type + ' text is: ' + text);
}

var As = document.links;

for (var i = 0, len = As.length; i<len; i++){
    As[i].onmouseover = myFunction;
}

JS Fiddle demo.

Or possibly:

function myFunction(nodeReference){
    var text = nodeReference.innerText || nodeReference.textContent;
    console.log('The text is: ' + text);
}

var body = document.body;

body.addEventListener('mouseover',function(e){
    if (e.target.tagName.toLowerCase() == 'a'){
        myFunction(e.target);
    }
}, false);

(The above won't work in IE, which uses attachEvent() in place of addEventListener() instead, but without IE I'm unable to experiment/improve for IE compatibility.)

JS Fiddle demo.

Incidentally, I've used the body because that's the only ancestor element, it's more performant (less CPU-intensive/exhaustive) to bind the events to the ancestor element closest to the event.target element, because mouseover fires more or less constantly, with, as you might imagine, every mouse movement.)

And you could, of course, in compliant browsers, use CSS:

<a class="green" href="url.com" data-definition="The definition of the phrase in this attribute..!">word here</a> <!-- note the custom data-* attribute -->

With the CSS:

a {
    position: relative;
    margin: 1em;
}

a:hover::after {
    content: attr(data-definition);
    position: absolute;
    top: 50%;
    left: 50%;
    color: #000;
    background-color: #fff; /* Old IE */
    background-color: rgba(255,255,255,0.5);
    width: 8em;
    border: 1px solid #000;
}

JS Fiddle demo.

References:

Upvotes: 2

failboat_cpt
failboat_cpt

Reputation: 57

I'm going to rephrase to question to make sure I understand: you want to have access to

<element>THIS TEXT</element>

in your function so that you can match it to a definition. There are multiple ways: with your present inline style, you can pass a 'this' parameter to your function

<element call=myFunction(this)>Content you want to access</element>

Then, in your js function, you can access the inner string with the node's ".innerText()" method:

function myFunction(elementWithGuts) {
    var whatYouWant = elementWithGuts.innerText();
}

Upvotes: 0

the system
the system

Reputation: 9336

Because you're using inline handler attributes, you can just pass the property you want.

<a onmouseover="myFunction(textContent)" class="green" href="url.com">word here</a>

Then define a parameter on your function.

function myFunction(txt) {
    alert(txt);
}

DEMO: http://jsfiddle.net/z4Pbj/

If you prefer, you can pass the entire element instead

<a onmouseover="myFunction(this)" class="green" href="url.com">word here</a>

then look up the property

function myFunction(el) {
    alert(el.textContent);
}

DEMO: http://jsfiddle.net/z4Pbj/1/

Note that this demonstrates the techniques. Depending on the browsers you support, you may want to use a different property for compatibility.

Upvotes: 0

Related Questions