How to Set OnClick attribute with value containing function in ie8?

Question

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>

Drinker

What is the line "javascript: alert('hello world');" all about? – Cleasta

what's the idea in not defining the "type" attribute of the script tag and use javascript as a class declaration or something like this? – Fidellia

Answer 1

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>

Cleasta

why put that in a closure? no reason for it that I can see. – Ipecac

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. – Cleasta

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 – Ipecac

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. – Cleasta

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. – Beadruby

Doh! It's onclick not onClick! 😖 Took me way too long to realize I had a capitalization error. – Wildfowl

Answer 2

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!');
}

Ipecac

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. – Drinker

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) – Ipecac

Answer 3

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

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

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

Triserial

Answer 4

You also can use:

element.addEventListener("click", function(){
    // call execute function here...
}, false);

Padova