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

Answer 1

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

The properties of the enclosing

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