Can an onclick() function not have the same name as the element calling it?

Question

So I had this button element that would refuse to fire its onclick() function whatever I did and it drove me crazy for a while :

<button type="button" id="newTreatment" name="newTreatment" onclick="newTreatment()" >Add a treatment</button>

I ended up simply changing the name of the function and it worked immediatly :

<button type="button" id="newTreatment" name="newTreatment" onclick="addTreatment()" >Add a treatment</button>

I've since then tested it on several other buttons and I've had similar issues all the time.

So is this really what's happening? The onclick() function can't have the same name as the id if its element? Why is that? I've tried looking for this online but I couldn't find any information about it.

Huh, this is interesting - I'm going to go see if it does the same on Safari (Mac). — Nebula, Jun 18 '15 at 15:05
It works for me. Could you state your browser and operating system please? — Nebula, Jun 18 '15 at 15:06
@ liam_ Windows 8 on Firefox, error in console says: TypeError: newTreatment is not a function — CoqPwner, Jun 18 '15 at 15:10

score 6 · Answer 1 · edited May 23 '17 at 11:45

6

Assuming you have your elements wrapped in a form, this happens because named elements are added as properties to the form.

When you were trying to call newTreatement, there already existed a property newTreatment in that scope. It thought you were referring to the property and gave you an error of

newTreatment is not a function

See Why JS function name conflicts with element ID? and Do DOM tree elements with ids become global variables?

edited May 23 '17 at 11:45

Community

1
1

answered Jun 18 '15 at 15:06

AmmarCSE

30,079
5
45
53

1

More about the topic: http://stackoverflow.com/a/9160009/1132836 – Guillermo Mansilla Jun 18 '15 at 15:07
This is not the reason why it doesn't work, because if it was only that, it works: https://jsfiddle.net/rpLmctt3/. The issue only occurs if the button is inside a `
`: https://jsfiddle.net/d7wjn4z9/
– Felix Kling Jun 18 '15 at 15:10
@FelixKling, updated my answer. I see what you mean – AmmarCSE Jun 18 '15 at 15:14
It's still incorrect. The issue is *not* that elements are properties of `document` or `window`, but that they are properties of the `form` element. – Felix Kling Jun 18 '15 at 15:14
@FelixKling, I see what you mean. https://jsfiddle.net/qsyrxrmr/1/ Thanks for pointing out my error! – AmmarCSE Jun 18 '15 at 15:20
@FelixKling, is there something still wrong with my answer? – AmmarCSE Jun 18 '15 at 15:29
Doesn't look like it, why? – Felix Kling Jun 18 '15 at 15:34

score 6 · Accepted Answer · edited May 23 '17 at 12:07

Inline event handlers are magical (i.e. not intuitive).

The properties of the enclosing <form> element are in scope of the inline event handlers. And since the name of each form control element becomes a property of the form element, using such a name inside the event handler will refer to the element instead.

The scope chain of the inline event handler is roughly:

Global scope / properties of window
^
|
Properties of document (e.g. body)
^
|
Properties of enclosing form (e.g. newTreatment or submit)
^
|
Properties of <button id="newTreatment" /> (e.g. type, onclick)
^
|
Function scope of inline event handler

Bindings in closer scopes (e.g. the form) shadow bindings in higher scopes, e.g. the global scope.

A simple solution would be explicitly refer to the global variable via window.newTreatment.

I described this in more detail here.

This seems to be formalized in the HTML5 spec.

Wow, I really had no idea what I was talking about. Thank you for making it clear :) — AmmarCSE, Jun 18 '15 at 15:36

Can an onclick() function not have the same name as the element calling it?

2 Answers2

Linked

Related