Getting calling element (anchor) dynamically with JavaScript

Question

How would I go about getting the text of an anchor tag using JavaScript. I know how to do this by attaching an ID to the tag but I was wondering if there's anyway to do it using the "this" keyword.

Example HTML Snippet:

<ul>
    <li><a href="javascript:alertText(this);">Link One</a></li>
    <li><a href="javascript:alertText(this);">Link Two</a></li>
</ul>

JavaScript Function:

function alertText(callingElement) {
    alert(callingElement.text);
}

This is not working (alert is printing out "undefined") because the "this" keyword seems to be pointing at the Window object instead of the anchor that called the function.

Using JQuery is an option if it is necessary.

related: http://stackoverflow.com/questions/21525413/how-to-get-the-caller-element-in-href-javascript-function — cregox, Feb 10 '15 at 16:00

RightSaidFred · Answer 1 · 2011-11-25T17:30:20.990

3

You can use .innerHTML, but to pass this, you need to use the onclick attribute.

<ul>
    <li><a href="#" onclick="alertText(this);">Link One</a></li>
    <li><a href="#" onclick="alertText(this);">Link Two</a></li>
</ul>

JS:

function alertText(callingElement) {
    alert(callingElement.innerHTML);
}

Or you can use .innerText or .textContent depending on the user's browser.

JS:

function alertText(callingElement) {
    alert(callingElement.textContent || callingElement.innerText);
}

UPDATE:

Ah, wait, it's an anchor element, so it does have a .text property, so your original function will work (at least in browsers that support HTML5).

JS:

function alertText(callingElement) {
    alert(callingElement.text);
}

edited Nov 25 '11 at 17:30

answered Nov 25 '11 at 17:05

RightSaidFred

11,209
35
35

Thanks for the reply! The reason I had originally tried to href attribute to call the JavaScript function was because I didn't want the URL to get appended with an "#" after clicking the link but I guess it's unavoidable. – Deity Nov 25 '11 at 17:52
@Deity: Replace `"#"` with `"javascript:;"`. – RightSaidFred Nov 25 '11 at 17:56

Manse · Answer 2 · 2011-11-25T17:16:10.543

1

Change it form href to onclick :

<ul>
    <li><a href="#" onclick="alertText(this)">Link One</a></li>
    <li><a href="#" onclick="alertText(this)">Link Two</a></li>
</ul>

and your JavaScript as follows :

function alertText(callingElement) {
    alert(callingElement.textContent || callingElement.innerText);
}

Example : http://jsfiddle.net/manseuk/q8Q7A/1/

Or inline jQuery ->

<ul>
    <li><a href="#" onclick="alert($(this).text())">Link One</a></li>
    <li><a href="#" onclick="alert($(this).text())">Link Two</a></li>
</ul>

Example http://jsfiddle.net/manseuk/4uCBf/

edited Nov 25 '11 at 17:16

answered Nov 25 '11 at 17:07

Manse

37,765
10
83
108

Don't forget to support those poor schlubs using IE8 and lower by including `|| callingElement.innerText`. ;) – RightSaidFred Nov 25 '11 at 17:11
must have saved my edit as you commented !!! ... think you beat me to the answer by 2 mins anyway ... +1 for you too – Manse Nov 25 '11 at 17:13
Yep, looks like we were overlapping. Though I just noticed that there is a `text` property on anchor elements. Not sure of its browser support though. Checking... – RightSaidFred Nov 25 '11 at 17:15
@RightSaidFred cant see one -> http://www.quirksmode.org/dom/w3c_html.html But i can see from the other answer it works !! – Manse Nov 25 '11 at 17:17
Yeah, I couldn't find it at quirksmode either, but I do see it [at MDN](https://developer.mozilla.org/en/DOM/HTMLAnchorElement) listed as part of HTML5. Not sure if it is actually new, or if it's been around and just now being brought in to the standard. – RightSaidFred Nov 25 '11 at 17:22
Ah, thanks for the quick response. I didn't even know about having to use the following to support IE8: `|| callingElement.innerText` – Deity Nov 25 '11 at 17:48

score 0 · Answer 3 · answered Nov 25 '11 at 17:10

0

You have to call the function inside the onclick attribute, like this.

<ul>
    <li><a href="#" onclick="alertText(this);  return false;  ">Link One</a></li>
    <li><a href="#" onclick="alertText(this);  return false;  ">Link Two</a></li>
</ul>

Then your code

alertText = function(elem) {
    alert(elem.text);
}

Check the example here.

answered Nov 25 '11 at 17:10

Jose Faeti

12,126
5
38
52

Thanks for the concise response! – Deity Nov 25 '11 at 17:53

score 0 · Answer 4 · answered Nov 25 '11 at 17:12

0

Inline event handlers are nasty. Since you indicated jQuery is an option, I would be tempted to do it more like this:

<ul class="alertList">
    <li><a href="#">Link One</a></li>
    <li><a href="#">Link Two</a></li>
</ul>

JS:

$(function() { //document ready function
  $('.alertList').on('click', 'a', function(event) {
    event.preventDefault();
    alert($(this).text()); // jQuery
    // alert(this.text); // plain JS? Didn't actually test
  });
});

answered Nov 25 '11 at 17:12

Greg Pettit

10,749
5
53
72

Thanks for pointing out how to do it by binding a function to the onclick event using jQuery! – Deity Nov 25 '11 at 17:53

Getting calling element (anchor) dynamically with JavaScript

4 Answers4