<ul class="Buttons">
    <li><a href="#" onclick="myFunc(); return false;">Accept</a></li>
    <li><a href="#" onclick="myFunc(); return false;">Reject</a></li>
    <li><a href="#" onclick="myFunc(); return false;">On Hold</a></li>
    <li><a href="#" onclick="myFunc(); return false;">Completed</a></li>
</ul>

In my script.js:

var myFunc = function () {
    // I want to get the Text of the link e.g. if the first list item link is
    // clicked, store "Accept" in a variable.
};

How can I achieve this?

<ul class="Buttons">
    <li><a href="#" onclick="myFunc(); return false;">Accept</a></li>
    <li><a href="#" onclick="myFunc(); return false;">Reject</a></li>
    <li><a href="#" onclick="myFunc(); return false;">On Hold</a></li>
    <li><a href="#" onclick="myFunc(); return false;">Completed</a></li>
</ul>

In my script.js:

var myFunc = function () {
    // I want to get the Text of the link e.g. if the first list item link is
    // clicked, store "Accept" in a variable.
};

How can I achieve this?

• javascript
• jquery

6 Answers 6

You could pass the current link as argument to the function:

<ul class="Buttons">
    <li><a href="#" onclick="myFunc(this); return false;">Accept</a></li>
    <li><a href="#" onclick="myFunc(this); return false;">Reject</a></li>
    <li><a href="#" onclick="myFunc(this); return false;">On Hold</a></li>
    <li><a href="#" onclick="myFunc(this); return false;">Completed</a></li>
</ul>

and then use the innerHTML property to fetch the text inside:

var myFunc = function (link) {
    alert(link.innerHTML);
};

UPDATE:

I haven't noticed that actually your question is tagged with jQuery. In this case I would remend you unobtrusively subscribing to the click handler:

<ul class="Buttons">
    <li><a href="#">Accept</a></li>
    <li><a href="#">Reject</a></li>
    <li><a href="#">On Hold</a></li>
    <li><a href="#">Completed</a></li>
</ul>

and in a separate js file:

$(function() {
    $('.Buttons a').click(function() {
        alert($(this).text());
        return false;
    });
});

UPDATE 2:

It was asked how to assign those click handlers if those anchors were dynamically generated. So let's assume that you start with the following markup:

<ul class="Buttons"></ul>

and then when some event happens (click or something) you add an anchor dynamically:

$('<li/>', {
    html: $('<a/>', {
        href: '#',
        text: 'some text ....',
        click: myFunc
    })
}).appendTo('.Buttons');

where you have defined myFunc somewhere:

var myFunc = function() {
    alert($(this).text());
    return false;
}

Since you seem to be using jQuery…

$("ul.buttons > li > a").click(function () {
  alert( $(this).text() );

  myFunc(this);
  return false;
});

…and please remove those onclick handlers. ;)

    $('.Buttons li a').click(function(event) {
       var myVariable = $(this).text();
        alert(myVariable);
        event.preventDefault();
    });

If you are using jQuery then you can bind to the elements like this:

//wait for document.ready to fire
$(function () {

    //find the links in the `.Button` list and bind a click event handler to them
    $('.Buttons').find('a').on('click', function () {

        //alert the text of the clicked element
        alert($(this).text());

        //prevent the normal behavior of the link, also stop the propagation of the event so no other elements fire event handlers for this event
        return false;
    });
});

Note that .on() is new in jQuery 1.7 and in this case is the same as using .bind(): http://api.jquery./on

Your HTML would then not need any JS within it:

<ul class="Buttons">
    <li><a href="#">Accept</a></li>
    <li><a href="#">Reject</a></li>
    <li><a href="#">On Hold</a></li>
    <li><a href="#">Completed</a></li>
</ul>

$(this).text() should work for you.

$(function(){ $('.Buttons').click(function(){ alert($(this).html(); }) })