javascript - how to get attributes of a link using attachListener? -

javascript - how to get attributes of a link using attachListener? -

i have tried both jquery , javascript, none able bring attribue of link. here code using- not printing in callme function's alert

function callme() { var ll = this; var id1 = ll.getattribute('id'); alert('inside callme...'+id1); } function load() { var lnk = new array(); lnk = document.getelementsbytagname("a"); var len = lnk.length; (var i=5;i<len;i++){ var id = lnk[i].getattribute('data-id'); lnk[i].attachevent('onclick',callme); }

}

i tried using next jquery too

$("a").click(function(){ alert(this.id); var shouldtrack = $(this).attr('id'); alert('inside callme...'+shouldtrack); });

> function callme() { > var ll = this;

when using ms proprietary attachevent, called listener's this keyword not set element on listener called (as when w3c addeventlistener method or html intrinsic event handler used). there number of fixes that, usual 1 utilize associated event object, function becomes:

function callme(evt) { var evt = evt || window.event; var ll = evt.target || evt.srcelement; > var id1 = ll.getattribute('id');

there no need utilize getattribute standard dom properties:

var id1 = ll.id;

.

> alert('inside callme...'+id1); > } > > function load() { > var lnk = new array(); > lnk = document.getelementsbytagname("a");

there not much point creating array , assigning lnk replace nodelist returned getelementsbytagname. also, seem after links, improve access document.links collection available , includes links whereas getelementsbytagname('a') include elements, including anchors.

so above 2 lines can be:

var lnk = document.links;

.

> var len = lnk.length; > > (var i=5; i<len; i++) { > var id = lnk[i].getattribute('data-id'); > lnk[i].attachevent('onclick',callme);

as noted above, attachevent proprietary ms method not supported browsers. improve have function first tries w3c addeventlistener method, attachevent. simple version is:

function addevent(el, evt, fn) { if (el.addeventlistener) { el.addeventlistener(evt, fn, false); } else if (el.attachevent) { el.attachevent('on' + evt, fn); } }

noting event equivalent html intrinsic event name without leading 'on'. attaching listener becomes:

addevent(lnk[i], 'click', callme);

.

> } > }

also, function should run after document ready, either utilize body's onload attribute, window.onload or set script before closing body tag.

lastly, don't forget phone call load. here entire script refactored:

<a href="#" id="link0">link0</a> <a href="#" id="link1">link1</a> <a href="#" id="link2">link2</a> <a href="#" id="link3">link3</a> <a href="#" id="link4">link4</a> <a href="#" id="link5">link5</a> <script type="text/javascript"> function addevent(el, evt, fn) { if (el.addeventlistener) { el.addeventlistener(evt, fn, false); } else if (el.attachevent) { el.attachevent('on' + evt, fn); } } function callme(evt) { var evt = evt || window.event; var ll = evt.target || evt.srcelement; var id1 = ll.id; alert('inside callme...'+id1); } function load() { var lnk = document.links; var len = lnk.length; (var i=5; i<len; i++) { var id = lnk[i].getattribute('data-id'); addevent(lnk[i], 'click', callme); } } load(); </script>

javascript javascript-events