Question

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.

Answer 1

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.