weird javascript issue with attribute name=item

B

btknorr

The following html and javascript combination fails to execute in
Internet Explorer...does anyone know why? If you change the input's
attribute "name" to anything other than "item" it works just fine. Any
help is greatly appreciated...thanks.

<html>

<input type="button" name="item" value="My name is item">

<script>
alert("hello");
alert(document.getElementsByTagName("input").item(0));
alert("hello");
</script>

</html>
 
V

VK

The following html and javascript combination fails to execute in
Internet Explorer...does anyone know why? If you change the input's
attribute "name" to anything other than "item" it works just fine. Any
help is greatly appreciated...thanks.

<html>

<input type="button" name="item" value="My name is item">

<script>
alert("hello");
alert(document.getElementsByTagName("input").item(0));
alert("hello");
</script>
Click to expand...

That's a really strange syntax... Not sure where did you get it... If
you want to get the first input element in your form named "item" - no
matter what kind of input is that and presuming that there is only one
form on the page:

alert( document.forms[0].elements['item'] );

If you want to get to get the first input element on your page named
"item" - no matter what kind of input is that and what form does it
appertain to:

alert( document.getElementsByName('item')[0] );

If you want to get to get all input elements no matter how are they
named - no matter what kind of inputs and what forms do they appertain
to:

alert( document.getElementsByTagName('INPUT') );

It would be helpful to know what is the real purpose of the code: then
the preffered way from three above could be suggested.
 
R

Richard Cornford

The following html and javascript combination fails to
execute in Internet Explorer...does anyone know why? If
you change the input's attribute "name" to anything other
than "item" it works just fine. Any help is greatly
appreciated...thanks.

<html>

<input type="button" name="item" value="My name is item">

<script>
alert("hello");
alert(document.getElementsByTagName("input").item(0));
alert("hello");
</script>

</html>
Click to expand...

The - getElementsByTagName - method returns an object implementing the -
nodeList - interface. The - nodeList - interface defines the - item -
method you are using above. However, many browser implement -
getElementsByTagName - such that it returns an object that is more like
a - namedNodeMap - or - HTMLCollection -, which is fine as those objects
satisfy the interface definition for - nodeList -, but go beyond it.

The problem is that - namedNodeMap - and - HTMLCollection - effectively
present named (and IDed) nodes as properties of the object. So if any
object has a name that corresponds with a method or property of that
object making a reference to it into a named property of an object will
replace the original method or property.

As you have named the INPUT "item" a reference to it has replaced the -
item - method of the - nodeList - interface. Your subsequent attempt to
call the method becomes an attempt to execute an INPUT Element, which
will result in a runtime error.

Richard.
 
B

btknorr

Thanks for the explanation. It's interesting to note that if you have
multiple tags on the page, if just one of them has either name=itme or
id=item and then you can no longer access any of the elements by
item(index). For example the following fails:

<html>

<input type="button" name="wow" value="wow">
<input type="button" name="wow2" value="wow2">
<input type="button" name="wow3" value="wow3">
<input type="button" name="wow4" value="wow4">
<input type="button" name="wow5" value="wow5">

<input type="button" name="item" value="My name is item">

<script>
alert("hello");
//try to access wow2 by index - this fails
alert(document.getElementsByTagName("input").item(1));
alert("hello");
</script>
</html>
 
R

Richard Cornford

[email protected] said:
Thanks for the explanation. It's interesting to note that if you have
multiple tags on the page, if just one of them has either name=itme or
id=item and then you can no longer access any of the elements by
item(index). ...
Click to expand...
<snip>

Yes, the - item - method has been replaced with a reference to the one
element with name/id 'item', so it cannot be used to refer to any of
the contents of the - nodeList -.

Richard.
 
E

Evertjan.

wrote on 19 mei 2006 in comp.lang.javascript:
<html>

<input type="button" name="wow" value="wow">
<input type="button" name="wow2" value="wow2">
<input type="button" name="wow3" value="wow3">
<input type="button" name="wow4" value="wow4">
<input type="button" name="wow5" value="wow5">

<input type="button" name="item" value="My name is item">

<script>
alert("hello");
//try to access wow2 by index - this fails
alert(document.getElementsByTagName("input").item(1));
alert("hello");
</script>
</html>
Click to expand...

<script type='text/javascript'>
alert(document.getElementsByTagName("input")[0].value);
alert(document.getElementsByTagName("input")[0].name);
alert(document.getElementsByTagName("input")[1].value);
alert(document.getElementsByTagName("input")[3].type);
alert(document.getElementsByTagName("input")[4].value);
</script>
 
T

Thomas 'PointedEars' Lahn

Thanks for the explanation. It's interesting to note that if you have
multiple tags on the page, if just one of them has either name=itme or
id=item and then you can no longer access any of the elements by
item(index). For example the following fails:

<html>
Click to expand...

The DOCTYPE declaration is missing before this tag:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

(or declare another fitting document type, preferably HTML 4.01 Strict).
<input type="button" name="wow" value="wow">
<input type="button" name="wow2" value="wow2">
<input type="button" name="wow3" value="wow3">
<input type="button" name="wow4" value="wow4">
<input type="button" name="wow5" value="wow5">

<input type="button" name="item" value="My name is item">

<script>
Click to expand...

The required `type' attribute is missing:

alert("hello");
//try to access wow2 by index - this fails
alert(document.getElementsByTagName("input").item(1));
alert("hello");
</script>
</html>
Click to expand...

However, if you put those controls into a `form' element, you do not need
Document::getElementsByTagName() and the item() method (whereas you do not
need the latter anyway since as per ECMAScript Language Binding the bracket
property accessor with a number value as argument serves the purpose[*]:

document.getElementsByTagName("input")[1]

), but the backwards compatible

document.forms[...].elements[1]

(provided that the corresponding `input' element is the second control in
the form) or, since you gave it a name,

document.forms[...].elements["wow2"]

The `...' need to be replaced either by the zero-based index of the form,
or the `form' element's name. But then you seldom need to give a form a
name because of the `form' property of (HTML)Input(Element) objects.
Search the archives.


PointedEars
___________
[*] <URL:http://w3.org/TR/DOM-Level-2-HTML/ecma-script-binding.html>
 

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

Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Issue with textbox script? 0
JavaScript code not working!! 6
In javascript, XML File Create, File Save 2
Problem with code 2
Check forms With JavaScript 1
Only one table shows up with the information 2
Function name and input name property 6

Members online

No members online now.
Total: 29 (members: 0, guests: 29)
Robots: 465

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top