Javascript function not called when id and function name same

Question

I want know the what is the effect of id and function when both are same. Example:

<tr> <td><img id='deleteAuthor' onclick='javascript: deleteAuthor(this)' src='images/close.png' /></td></tr>";
        function deleteAuthor(element){
            alert(element);
        }
    output:TypeError: deleteAuthor is not a function
    [Break On This Error]   


    <tr> <td><img id='deleteAuthorbt' onclick='javascript: deleteAuthor(this)' src='images/close.png' /></td></tr>";
       function deleteAuthor(element){
        alert(element);
      }
    output:Object HTMLImageElement

Please Why it behave so?

it is because both the element id and the function are colliding in the global scope resulting in the element overriding the function reference — Arun P Johny, Jul 11 '13 at 06:22
more read http://stackoverflow.com/questions/3434278/ie-chrome-are-dom-tree-elements-global-variables-here — Arun P Johny, Jul 11 '13 at 06:24
possible duplicate of [TypeError: prc.cng() is not a function in Firefox, Uncaught TypeError: Object # has no method 'cng' in Chrome](http://stackoverflow.com/questions/16581252/typeerror-prc-cng-is-not-a-function-in-firefox-uncaught-typeerror-object) — Quentin, Jul 11 '13 at 06:38

score 2 · Accepted Answer · answered Jul 11 '13 at 06:22

2

U have to use different names for id and function. Same names for both will cause ambiguity

answered Jul 11 '13 at 06:22

Benny

521
3
8
21

It isn't ambiguous, the scoping and overriding rules are consistent. A better solution is to avoid doing everything in the global scope. – Quentin Jul 11 '13 at 06:39

Javascript function not called when id and function name same

1 Answers1

Linked