weird javascript issue with attribute name=item

Discussion in 'Javascript' started by btknorr@gmail.com, May 19, 2006.

  1. Guest

    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>
    , May 19, 2006
    #1
    1. Advertising

  2. VK Guest

    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.
    VK, May 19, 2006
    #2
    1. Advertising

  3. 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.
    Richard Cornford, May 19, 2006
    #3
  4. Guest

    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>
    , May 19, 2006
    #4
  5. 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.
    Richard Cornford, May 19, 2006
    #5
  6. Evertjan. Guest

    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)
    Evertjan., May 19, 2006
    #6
  7. 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>
    Thomas 'PointedEars' Lahn, May 25, 2006
    #7
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?QW5kZXJzIEphbnNzb24=?=

    Invalid 'name' attribute name

    =?Utf-8?B?QW5kZXJzIEphbnNzb24=?=, Jan 20, 2006, in forum: ASP .Net
    Replies:
    3
    Views:
    1,903
    =?Utf-8?B?QW5kZXJzIEphbnNzb24=?=
    Feb 14, 2006
  2. ding feng
    Replies:
    2
    Views:
    2,806
    ding feng
    Jun 25, 2003
  3. bprimuslevy
    Replies:
    1
    Views:
    437
    Soren Kuula
    Aug 23, 2006
  4. Pavils Jurjans
    Replies:
    3
    Views:
    181
    Pavils Jurjans
    Mar 18, 2005
  5. Robert Oschler
    Replies:
    2
    Views:
    134
    Robert Oschler
    Aug 3, 2005
Loading...

Share This Page