Function name and input name property

I

Ivan S

Hi all.


There is an Javascript error (xxxx is not a function) if there exists
a function name same as input's name (or id) property.


Here is source code sample:

<html>
<head>
<title>Test</title>
<script type="text/javascript">
function test() {
alert("Test");
}
</script>
</head>
<body>
<form>
<input type="button" name="test" onclick="test();" value="Test" />
</form>
</body>
</html>


When input button is clicked, and error message is shown saying "test
function is not defined".


If I change function name, or name property of the input element,
everything works fine.

So, I guess there is a name collision between function name and
input's element name. I don't know why is this happening, can someone
explain it to me? :)



Tnx
 
D

Dmitry A. Soshnikov

[...]
So, I guess there is a name collision between function name and
input's element name. I don't know why is this happening, can someone
explain it to me? :)

[...]
Click to expand...

That's 'cause of <form> wrapper for <input>. The code of |onclick|
attribute trabsforms to function object which is created in context,
containing in current scope chain variable object of the <form>. Put |
debugger;| statement into the code and see the scope chain (e.g. in
Firebug or Venkman):

<input ... onclick="alert(test === this); debugger;" />

Scope chain (5 variable objects):

0. Call event=Event click
1. input Test
2. form (with |test| element; that's your "issue")
3. Document
4. Window (with |test| function)

So, identifier resolution in |onclick| evaluated code find the name |
test| in point (3), which contains |test| as form element. If to
remove <form> tag (and form variable object) this code will work as
you want (which means |test| will be found in Window variable object).

/ds
 
B

Bart Van der Donck

Ivan said:
There is an Javascript error (xxxx is not a function) if there exists
a function name same as input's name (or id) property.

Here is source code sample:

<html>
<head>
        <title>Test</title>
        <script type="text/javascript">
                function test() {
                        alert("Test");
                }
        </script>
</head>
<body>
        <form>
                <input type="button" name="test" onclick="test();" value="Test" />
        </form>
</body>
</html>

When input button is clicked, and error message is shown saying "test
function is not defined".

If I change function name, or name property of the input element,
everything works fine.

So, I guess there is a name collision between function name and
input's element name. I don't know why is this happening, can someone
explain it to me? :)
Click to expand...

You could use 'onClick="window.test();"' to call the function by its
fully qualified name. But it's never wise to use potentially
conflicting names. Apart from your problem, they may also create
confusion in regard to host/native objects that are already present
(such as here the 'test()'-method in js regular expressions).

Hope this helps,
 
D

Dmitry A. Soshnikov

[...]
0. Call event=Event click
1. input Test
2. form (with |test| element; that's your "issue")
3. Document
4. Window (with |test| function)

So, identifier resolution in |onclick| evaluated code find the name |
test| in point (3)
[...]
Click to expand...

Sorry, typo, find in point (2), step (3).
 
T

Thomas 'PointedEars' Lahn

Bart said:
You could use 'onClick="window.test();"' to call the function by its
fully qualified name.
Click to expand...

But he should use a reference to the ECMAScript Global Object instead, like

var _global = this;

in the global execution context.
But it's never wise to use potentially conflicting names.
ACK

Apart from your problem, they may also create
confusion in regard to host/native objects that are already present
(such as here the 'test()'-method in js regular expressions).
Click to expand...

And it will probably prevent it from being part of a unit test with JSUnit
and perhaps other tools.


PointedEars
 
I

Ivan S

That's 'cause of <form> wrapper for <input>. The code of |onclick|
attribute trabsforms to function object which is created in context,
containing in current scope chain variable object of the <form>. Put |
debugger;| statement into the code and see the scope chain (e.g. in
Firebug or Venkman):

<input ... onclick="alert(test === this); debugger;" />

Scope chain (5 variable objects):

0. Call event=Event click
1. input Test
2. form (with |test| element; that's your "issue")
3. Document
4. Window (with |test| function)

So, identifier resolution in |onclick| evaluated code find the name |
test| in point (3), which contains |test| as form element. If to
remove <form> tag (and form variable object) this code will work as
you want (which means |test| will be found in Window variable object).

/ds
Click to expand...

Thanks, this clears things up. :)




Ivan
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Why doesn't the function get called? 1
Reversing output of user input by using while loop... 2
Problems with using event handlers for button and textarea input 1
How to discover a CSS Selector name? 8
DJForm Login Help! 1
I keep getting this error when im trying to show category name. 0
Function call from button to automatic 7
Problem with android and scrolling with <input textarea 5

Members online

No members online now.
Total: 75 (members: 0, guests: 75)
Robots: 331

Forum statistics

Threads
473,982
Messages
2,570,185
Members
46,736
Latest member
AdolphBig6

Latest Threads

Top