468,168 Members | 1,504 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,168 developers. It's quick & easy.

Why error?

Sample code of the problem:

function inputOne() {
alert('a');
}

<input name="inputOne" id="inputOne" value="Warn" onclick="inputOne()">

The error is the object doesn't support this method.

I know it is because the method name is the same with the object
element name, but why it cause error?

Jul 28 '06 #1
4 1295
Cylix said the following on 7/28/2006 2:54 AM:
Sample code of the problem:

function inputOne() {
alert('a');
}

<input name="inputOne" id="inputOne" value="Warn" onclick="inputOne()">

The error is the object doesn't support this method.

I know it is because the method name is the same with the object
element name, but why it cause error?
Because of the scope chain and idiosyncrasies in IE.

Simple solution: Don't name your functions the same as an ID or NAME
attribute in the page.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jul 28 '06 #2
Cylix wrote:
Sample code of the problem:

function inputOne() {
alert('a');
}

<input name="inputOne" id="inputOne" value="Warn" onclick="inputOne()">

The error is the object doesn't support this method.

I know it is because the method name is the same with the object
element name, but why it cause error?
You have an identifier clash here, as you already knew. You have to see
it like this:

first, it interprets the method, and creates the following reference:

window.inputOne = function() {
alert('a');
}

Then it loads the input element. The ID of an element is also created as
a property of the window object, so it will create the following reference:

window.inputOne = [HTML DOM Object]

Then you try to invoke inputOne() as if it was a method, but its not
anymore, you changed it into a DOM element. Hope it clarifies things.

Vincent
Jul 28 '06 #3
Thanks, Vincent.
I understand it clearly now.

Jul 28 '06 #4
Vincent van Beveren wrote:
Cylix wrote:
>Sample code of the problem:

function inputOne() {
alert('a');
}

<input name="inputOne" id="inputOne" value="Warn" onclick="inputOne()">

The error is the object doesn't support this method.

I know it is because the method name is the same with the object
element name, but why it cause error?

You have an identifier clash here, as you already knew. You have to see
it like this:

first, it interprets the method, and creates the following reference:

window.inputOne = function() {
alert('a');
}

Then it loads the input element. The ID of an element is also
created as a property of the window object, so it will create
the following reference:

window.inputOne = [HTML DOM Object]
As we are talking about IE (and close imitators) when it comes to the
creation of named properties of the global object from IDed elements,
this is demonstrably false. If a property of the global object is
created from either a globally declared variable or a global function
declaration IE does not then go on to overwrite the value of the
corresponding property of the global object when it later encounters an
IDed element with an ID that corresponds with the existing
variable/function name.

And Mozilla/Gecko browsers do not create those global references but
the same problem would be apparent in that environment well.
Then you try to invoke inputOne() as if it was a method, but
its not anymore, you changed it into a DOM element. Hope
it clarifies things.
When some browsers (but not all) create an event handling function
object from the code in an intrinsic event attribute value they provide
that function object with an augmented scope chain (either statically
or dynamically, depending on the browser). Exactly which objects appear
on this augmented scope chain (and when they appear on it) varies from
browser to browser, but almost all will put the FORM element on the
scope chain of an INPUT element within that form.

When - inputOne(); - is executed within the event handling function
created for the onclick event of the input element the first thing that
must happen is that the Identifier - inputOne - is resolved/evaluated
into a Reference object. That resolution/evaluation is carried out
against the scope chain, with the resulting Reference object having its
'base' property set to a reference to the first object on the scope
chain with an existing property with the name 'inputOne'.

In order for browsers to support the 'shortcut' forms of property
accessors for form controls in HTML DOMs, each named form control is
made into a property of the FORM element with a name that corresponds
to the NAME attribute of the control. (In the HTML DOMs of modern
browsers this can be expected to also be true for IDed elements). So as
- inputOne - is resolved against the scope chain the first object
encountered on the chain with a property named 'inputOne' is the FORM
element, and so - inputOne - resolves as a reference type with its
'base' property set to a reference to the FORM element and its
'property name' value set to the string 'inputOne'.

The use of this Reference type object in the subsequent call operation
results in an attempt to call the object referred to by the 'inputOne'
property of the FORM element, and that property refers to the form
control element. Form control elements do not have an internal [[Call]]
method so an exception is thrown by the attempt to execute them.

The Identifier collision does not happen at the global level it happens
on the augmented scope chain of the browser-created event handling
function.

Richard.

Jul 28 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Gregory | last post: by
7 posts views Thread by p | last post: by
3 posts views Thread by Manuel | last post: by
1 post views Thread by developer | last post: by
reply views Thread by mchuc7719 | last post: by
reply views Thread by kamranasdasdas | last post: by
reply views Thread by gcreed | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.