Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Jul 2002
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question IE vs. NS regarding getElementsByName()

    Hi,

    I need your input....

    The following (Option 1) doesn't work in IE6 - I get "Item is undefined" error.

    The following (Option 2) works in NS but not in IE. IE doesn't retrieve the object. I will be using this instead of Option 1 cause I will have multiple tags with the same name so I can easily change properties for each.


    Code (Option 1):

    <span name="Item1">Some text...</span>

    <script>

    Item1.style.display = "none";

    </script>


    Code: (Option 2):

    <span name="Item1">Some text...</span>

    <script>

    var e1 = document.getElementsByName("Item1");

    if (document.all)
    {e1.style.display = "none";}
    else
    {e1.item(0).style.display = "";}

    </script>



    I hope someone can help me out with this.



  • #2
    New Coder
    Join Date
    Jun 2002
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts
    good question, easy answer: apparently, doesn't work (at least with that syntax) on IE.

    Anyway remove the whole expression:
    <script>
    Item1.style.display = "none";
    </script>

    for that's uncorrect and works nowhere: Item1 can't be used a s a rference to an object, for in itslef its just a name you gave to something, not an object identifier

    GetElementsByName
    syntax for NN:
    http://www.mozilla.org/docs/dom/domr...doc_ref49.html

    syntax for IE:
    http://msdn.microsoft.com/library/de...entsbyname.asp

    but apparently doens't work on IE, althouhg both claim they know/accept the syntax. I'm surprised at an apparent shortcoming by IE5 anyway.
    Microsoft shows this example:

    <SCRIPT>
    function fnGetNames(){
    // Returns a collection with 2 INPUT type=text elements.
    var aInput=document.getElementsByName("firstName");
    }
    </SCRIPT>
    <INPUT TYPE="text" NAME="firstName">
    <INPUT TYPE="text" NAME="firstName">
    <INPUT TYPE="button" VALUE="Get Names" onclick="fnGetNames()">

    It is a relatively useless one if you don't change it to:

    <SCRIPT>
    function fnGetNames(){
    // Returns a collection with 2 INPUT type=text elements.
    var aInput=document.getElementsByName("firstName");
    return aInput; /*hey guys it has to return or nest an alert, or proves NOTHING!*/
    }
    </SCRIPT>
    <form>
    <INPUT TYPE="text" NAME="firstName">
    <INPUT TYPE="text" NAME="firstName">
    <INPUT TYPE="button" VALUE="Get Names" onclick="alert( fnGetNames() )">
    </form> <!--the form tag microsoft guys...-->

    Now such alret holds: object.
    Uhmmmmmm.... wasn't declared a "collection"?
    "Returns a collection of objects with the same NAME attribute value."
    So the method does soemthing for it returns an object, but this object is NOT an array for you can't retrieve by item() as Claudio noticed, none the less, try this:

    <SCRIPT>
    function fnGetNames(){
    // Returns a collection with 2 INPUT type=text elements.
    var aInput=document.getElementsByName("firstName");
    alert(aInput.length+"\n\n"+aInput[0].style.color+"\n"+aInput.item(0).style.color)
    }
    </SCRIPT>
    <form>
    <INPUT TYPE="text" NAME="firstName" style="color:#999999">
    <INPUT TYPE="text" NAME="firstName">
    <INPUT TYPE="button" VALUE="Get Names" onclick="fnGetNames()">
    </form>

    it works PERFECTLY.

    Now, change the inputs to spans

    <SCRIPT>
    function fnGetNames(){
    // Returns a collection with 2 INPUT type=text elements.
    var aInput=document.getElementsByName("firstName");
    alert(aInput.length+"\n\n"+aInput[0].style.color+"\n"+aInput.item(0).style.color)
    }
    </SCRIPT>
    <form>
    <span NAME="firstName" style="color:#999999">one</span>
    <span NAME="firstName">two</span>
    <INPUT TYPE="button" VALUE="Get Names" onclick="fnGetNames()">
    </form>

    It does NOT work any longer!

    The collection is not built anylonger, althouhg data type is still object:

    Evidence:

    <SCRIPT>
    function fnGetNames(){
    // Returns a collection with 2 INPUT type=text elements.
    var aInput=document.getElementsByName("firstName");
    alert(aInput.length+"\nit has a length=0 as you see")
    }
    </SCRIPT>
    <form>
    <span NAME="firstName" style="color:#999999">one</span>
    <span NAME="firstName">two</span>
    <INPUT TYPE="button" VALUE="Get Names" onclick="fnGetNames()">
    <form>

    uhmmm...
    Last edited by TrueLies; 07-05-2002 at 01:34 AM.
    Alberto http://www.unitedscripters.com/

  • #3
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    I've never had any problems in either browser with

    document.getElementsByName('nodeName').item(X)

    where X is the index of the named item.

  • #4
    New Coder
    Join Date
    Jul 2002
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hummm... Ya!

    Hi,


    It is definitley a MS BS thing.

    If you do the following it works:

    (Change the name="??" to ID="??")

    Code:

    <span id="Item1">Some Text...</span>






    Therefore,

    I'm required to change the tag attribute to 'ID' if browser is IE and to 'name' for all others.

    Kinda sloppy... Hummm.
    Last edited by Claudio; 07-05-2002 at 02:59 AM.

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    frankfurt, german banana republic
    Posts
    1,848
    Thanks
    0
    Thanked 0 Times in 0 Posts
    From the microsoft page:

    When you use the getElementsByName method, all elements in the document that have the specified NAME or ID attribute value are returned.

    Elements that support both the NAME and the ID attribute are included in the collection returned by the getElementsByName method, but not elements with a NAME expando.
    Which, to my own astonishment, leaves the impression that Microsoft actually implemented that function quite near to what w3c recommendations imply: That a <span> element mustn't have a name attribute - and thus it gets treated as an expando property, and not retrieved.

    Claudio, you can always assign id attributes to <span> elements and retrieve them in IE5+ and NS6+ with document.getElementById("idString"). Or you could assign them the same CSS class and manipulate the CSS definitions for that particular class (which I don't know right out of the mind to do, but wouldn't be hard to research in the references).

  • #6
    New Coder
    Join Date
    Jul 2002
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts

    ...

    Hi,

    Well mordred,

    I discovered that with using CSS that I could not get the proper effect that I was looking for. Instead I had to use style.display = "" or "none".

    Here's what I was trying to achieve:

    In a quesy to the Database for product, the query would return product detail including pricing. Now I'm adding the feature of currency conversion. I do the conversion automatically and hide the results when user queries DB. Then by user pressing a button of something, the units will swap, thus the hiding/showing method.

    Now, to have this replace in the same position, I had to use style.display because CSS won't do that.

    That has been my experience, I could be wrong / missing something.

    Cheers,

    Thank you to all who have been nice enough to contribute to a solution.


  • #7
    Regular Coder
    Join Date
    Jun 2002
    Posts
    185
    Thanks
    0
    Thanked 0 Times in 0 Posts
    getElementsByName() and getElementsByTagName() return an array of element objects - there can be more than one element with the same name attribute or tag name.

    You need to use an array index to access a single element in the array:

    Code:
    <span name="Item1">...</span>
    <span name="Item1">...</span>
    <span name="Item1">...</span>
    ...
    var elList = document.getElementsByName("Item1");
    
    //Hide the first "Item1" span.
    elList[0].style.display = "none"; 
    
    //Hide the second "Item1" span.
    elList[1].style.display = "none";
    If you plan to give each tag a unique name value, you may as well use id instead. getElementById() returns a single element object so this works:

    Code:
    <span id="Item1">...</span>
    ...
    //Hide the one and only "Item1" span.
    var el = document.getElementsById("Item1");
    el.style.display = "none";

  • #8
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Originally posted by BrainJar
    getElementsByName() and getElementsByTagName() return an array of element objects
    Read: "NodeList"
    Which is more than an array, it is an object defined in the W3C DOM Core...

    The W3C specs define the only way to access nodes in the NodeList is through the item() method, but all browsers which support the DOM allow array indexing as well. I personally prefer using item(), to each his own though.

  • #9
    New Coder
    Join Date
    Jun 2002
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi

    like mordred said, it is that way: Microsoft accepts to scan names by getElementsByName only if the tag was since javaScript inceptions, so to say, a tag that allowed for a name property, discarding all the rest (quite puzzling, given the fact the IE4++ engine has always been characterized by being able to address almost every object).
    An adjunctive evidence:

    <SCRIPT>
    function fnGetNames(){
    // Returns a collection with 2 INPUT type=text elements.
    var aInput=document.getElementsByName("firstName");
    alert(aInput.length+"\n\n"+aInput[0].style.color+"\n"+aInput.item(0).style.color)
    }
    </SCRIPT>
    <form>
    <img src="foo.jpg" style="color:#000000" name="firstName">
    <INPUT TYPE="text" NAME="firstName" style="color:#999999">
    <INPUT TYPE="text" NAME="firstName">
    <INPUT TYPE="button" VALUE="Get Names" onclick="fnGetNames()">
    </form>

    whereas the tag IMG accepts name, and in fact gets read by item() !
    In other words, for spans use
    getElementById()

    too bad, I know... but instructive anwyay, we learned something relevant with a rarely used syntax: getElementsByName. We didn't waste our time.

    ciao
    Alberto http://www.unitedscripters.com/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •