How to get title attribute from link within a class with javascript

Question

I am trying to pull the title attribute from links within a class and having a bit of trouble:

<div class="menu">
<a href="#" title="4242" onclick="cselect()">United States</a>
<a href="#" title="4243" onclick="cselect()">Canada</a>
</div>

And here's what I've tried:

function cselect(){
    var countryID = $(this).attr("title");
    location.href = location.href.split("#")[0] + "#" +countryID;
    location.reload();
}

Thanks!

On a side note, never use onclick or other javascript within your HTML layer, don't mix in business logic. Create a javascript event handler instead! — Mark Pieszak - Trilon.io, Oct 29 '13 at 15:44

score 3 · Answer 1 · answered Oct 29 '13 at 15:42

3

Pass in this to your inline handler:

function cselect(obj){
    var countryID = $(obj).attr("title");
    console.log(countryID);
}

<a href="#" title="4242" onclick="cselect(this)">United States</a>
<a href="#" title="4243" onclick="cselect(this)">Canada</a>

Demo: http://jsfiddle.net/yDW3T/

answered Oct 29 '13 at 15:42

tymeJV

103,943
14
161
157

@BharathRallapalli -- OP is using it in his demo. – tymeJV Oct 29 '13 at 15:45

feeela · Accepted Answer · 2013-10-29T15:54:04.190

You must refer to the clicked element. One way is to pass this, as tymeJV suggested.

But I would set the event handler from a separate script block and just refer to the current element. For both of the following two solutions no additional inline onclick attribute is required.

/* using jQuery */
jQuery( '.menu a' ).on( 'click', function( event ) {
    event.preventDefault();

    var countryID = jQuery( this ).attr( 'title' ); // <-- !!!

    location.href = location.href.split( '#' )[0] + '#' + countryID;
    location.reload();

} );

or

/* using plain JS */
var countryAnchors = document.querySelectorAll( '.menu a' );
for( var anchor in countryAnchors ) {
    anchor.addEventListener( 'click', function( event ) {
        event.preventDefault();

        var countryID = this.getAttribute( 'title' ); // <-- !!!

        location.href = location.href.split( '#' )[0] + '#' + countryID;
        location.reload();

    }, false );
}
/* todo: cross-browser test for compatibility on querySelectorAll() and addEventListener() */

Thank you, will go with this approach. – APAD1 Oct 29 '13 at 15:57 — APAD1, Oct 29 '13 at 15:57

score 0 · Answer 3 · answered Oct 29 '13 at 15:44

0

It just simple like this:

function cselect(){
    var countryID = $(this).attr("title");
    window.location.hash = countryID
    location.reload();
}

answered Oct 29 '13 at 15:44

Tony Dinh

6,668
5
39
58

How to get title attribute from link within a class with javascript

3 Answers3

Linked