I have code like
<a id='lnk1' onclick='do something' >test</a>
Later on code is added to the same anchor tag like
lnk = document.getElementById('lnk1')
lnk.onclick = function() { do something}
Now what is happening is that in the second piece of code the onclick function of the anchor tag is getting overwritten. What I want to happen instead is that the first onclick's code is run and after that the 2nd onclick's is run.
There is a very simple, standards-compliant way to do this:
lnk1.addEventListener('click', function() {
// do something
});
This doesn't work in IE before version 9, so you'll need to do this:
var handler = function() {
// do something
};
if ("addEventListener" in lnk1) { // standards-compliant browsers
lnk1.addEventListener('click', handler);
} else { // Internet Explorer < v9
lnk1.attachEvent('onclick', handler);
}
This will work, and both the original function specificed in the HTML attribute and in the code above will run. HOWEVER it would be far nicer to define all your event handlers in the same place: in the Javascript. Think hard about removing event handling logic from your HTML attributes.
You could try this:
var lnk = document.getElementById('lnk1'); // don't forget var!
var oldHandler = lnk.onclick;
lnk.onclick = function(ev) {
if (oldHandler) oldHandler(ev);
// do something ...
};
That code saves a reference to the old handler, and if it's not empty it calls it before doing whatever else the new handler wants to do.
You could put the call to the old handler after the new code, or mixed in, or whatever.
this is important then you'd want to use .call() to make sure it's correct. Also not that this answer is over 10 years old.
this keyword is used in oldHandler, it will be wrong! one solution is to write: if (oldHandler) oldHandler.call(this, ev);<a id='lnk1' onclick='do something' >test</a>
JavaScript
lnk1 = document.getElementById('lnk1')
lnk1.addEventListener('click',function() { do something}, false);
when setting onclick you are overwrite existing attribute, but assign click through event listener then it will be ok.
You have a mistake in your statement:
JAVASCRIPT
lnk = document.getElementById('lnk1')
lnk1.onclick = function() { do something} \\ replace lnk1 with lnk
lnk.onclick = function() { do something} \\ this will work
You have defined lnk as variable but your are calling lnk1 with onclick event. This is a wrong statement.
USE HTML
<a id='lnk1'>test</a>
See the Demo: http://jsfiddle.net/tm5cX/
addEventListener.