How can I programmatically invoke an onclick() event from a anchor tag while keeping the ‘this’ reference in the onclick function?

Question

The following doesn't work... (at least not in Firefox: document.getElementById('linkid').click() is not a function)

<script type="text/javascript">     function doOnClick() {         document.getElementById('linkid').click();         //Should alert('/testlocation');     } </script> <a id="linkid" href="/testlocation" onclick="alert(this.href);">Testlink</a> 

Answer 1

You need to apply the event handler in the context of that element:

var elem = document.getElementById("linkid"); if (typeof elem.onclick == "function") {     elem.onclick.apply(elem); } 

Otherwise this would reference the context the above code is executed in.

Answer 2

The best way to solve this is to use Vanilla JS, but if you are already using jQuery, there´s a very easy solution:

<script type="text/javascript">     function doOnClick() {         $('#linkid').click();     } </script> <a id="linkid" href="/testlocation" onclick="alert(this.href);">Testlink</a> 

Tested in IE8-10, Chrome, Firefox.