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.

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.

• javascript
• jquery
• html

• related: stackoverflow./questions/21525413/… – cregox Commented Feb 10, 2015 at 16:00

4 Answers 4

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);
}

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/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/manseuk/4uCBf/

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.

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
  });
});