32

My goal is to change the onclick attribute of a link. I can do it successfully, but the resulting link doesn't work in ie8. It does work in ff3.

For example, this works in Firefox 3, but not IE8. Why?

<p><a id="bar" href="#" onclick="temp()">click me</a></p>

<script>
    doIt = function() {
        alert('hello world!');
    }
    foo = document.getElementById("bar");
    foo.setAttribute("onclick","javascript:doIt();");
</script>
Neuron
  • 5,141
  • 5
  • 38
  • 59
edt
  • 22,010
  • 30
  • 83
  • 118

4 Answers4

65

You don't need to use setAttribute for that - This code works (IE8 also)

<div id="something" >Hello</div>
<script type="text/javascript" >
    (function() {
        document.getElementById("something").onclick = function() { 
            alert('hello'); 
        };
    })();
</script>
hugoware
  • 35,731
  • 24
  • 60
  • 70
  • 2
    why put that in a closure? no reason for it that I can see. – Jonathan Fingland Jun 19 '09 at 17:27
  • 1
    Why write a separate function for alert('hello world')? :) -- It depends on what you're doing, a closure would be better IMO if you don't plan on calling it from other places. – hugoware Jun 19 '09 at 17:29
  • 6
    in that case, no need for the function or closure. just document.getElementById("something").onclick = function() { alert('hello'); }; without any of the rest of it – Jonathan Fingland Jun 19 '09 at 17:32
  • Oh, you mean the self-executing function? There was no reason for it - I just wrote it that way so it would execute on start up. – hugoware Jun 19 '09 at 17:38
  • Hi @Hugoware In case if i need to call another function like document.getElementById("something").onclick = return sum() return sub(); .Is it possible to do so or what is the exact syntax to do it.Kindly help me. – goku Feb 05 '16 at 06:17
  • Doh! It's `onclick` not `onClick`! Took me way too long to realize I had a capitalization error. – clozach Mar 09 '17 at 07:11
9

your best bet is to use a javascript framework like jquery or prototype, but, failing that, you should use:

if (foo.addEventListener) 
    foo.addEventListener('click',doit,false); //everything else    
else if (foo.attachEvent)
    foo.attachEvent('onclick',doit);  //IE only

edit:

also, your function is a little off. it should be

var doit = function(){
    alert('hello world!');
}
Jonathan Fingland
  • 56,385
  • 11
  • 85
  • 79
  • That works, but I'm trying to override an onclick event where the onclick attribute & value are added to the anchor tag. I don't have access to changing the anchor tag, so I need to do it with JavaScirpt. – edt Jun 19 '09 at 18:10
  • 1
    addEventListener and attachEvent are much better ways of adding events to DOM elements (including anchor tags). they are unobtrusive methods for adding an arbitrary number of events to elements, the onclick property, by contrast, only allows one event and is far more error prone (for example other scripts changing the property) – Jonathan Fingland Jun 20 '09 at 03:04
6

You could also set onclick to call your function like this:

foo.onclick = function() { callYourJSFunction(arg1, arg2); };

This way, you can pass arguments too. .....

Andre Silva
  • 4,782
  • 9
  • 52
  • 65
small wonder
  • 61
  • 1
  • 2
1

You also can use:

element.addEventListener("click", function(){
    // call execute function here...
}, false);
Quang Le
  • 41
  • 4