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>

What is the line "javascript: alert('hello world');" all about? — hugoware, Jun 19 '09 at 17:28
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? — backslash17, Jun 19 '09 at 17:34

score 65 · Accepted Answer · answered Jun 19 '09 at 17:26

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>

answered Jun 19 '09 at 17:26

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

score 9 · Answer 2 · answered Jun 19 '09 at 17:24

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

answered Jun 19 '09 at 17:24

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

score 6 · Answer 3 · edited Sep 21 '13 at 01:12

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

edited Sep 21 '13 at 01:12

Andre Silva

4,782
9
52
65

answered Sep 21 '13 at 00:49

small wonder

61
1
2

Quang Le · Answer 4 · 2014-02-27T07:42:27.240

1

You also can use:

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

edited Feb 27 '14 at 07:42

answered Feb 27 '14 at 07:10

Quang Le

41
4

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

4 Answers4

Linked