Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > weird javascript issue with attribute name=item

Reply
Thread Tools

weird javascript issue with attribute name=item

 
 
btknorr@gmail.com
Guest
Posts: n/a
 
      05-19-2006
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>

 
Reply With Quote
 
 
 
 
VK
Guest
Posts: n/a
 
      05-19-2006

http://www.velocityreviews.com/forums/(E-Mail Removed) wrote:
> 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>


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.

 
Reply With Quote
 
 
 
 
Richard Cornford
Guest
Posts: n/a
 
      05-19-2006
(E-Mail Removed) wrote:
> 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>


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.


 
Reply With Quote
 
btknorr@gmail.com
Guest
Posts: n/a
 
      05-19-2006
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>

 
Reply With Quote
 
Richard Cornford
Guest
Posts: n/a
 
      05-19-2006
(E-Mail Removed) wrote:
> 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). ...

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

 
Reply With Quote
 
Evertjan.
Guest
Posts: n/a
 
      05-19-2006
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>
>


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


--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      05-24-2006
(E-Mail Removed) wrote:

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


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>


The required `type' attribute is missing:

<script type="text/javascript">

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


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>
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: A Weird Appearance for a Weird Site Beauregard T. Shagnasty HTML 1 01-21-2011 04:17 PM
Re: A Weird Appearance for a Weird Site richard HTML 0 01-21-2011 07:10 AM
Re: A Weird Appearance for a Weird Site dorayme HTML 1 01-21-2011 06:51 AM
Re: A Weird Appearance for a Weird Site richard HTML 0 01-21-2011 06:46 AM
Javascript created IFrame document, weird domain issue Robert Oschler Javascript 2 08-03-2005 05:30 PM



Advertisments