SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast codlib's Avatar
    Join Date
    Jan 2007
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question getElementsByName is not working in IE

    Hi,

    I just tried the following code in IE and mozila. In mozila it's correctly returning the number of div elements with name "gallery". but in IE it is zero. can anyone tell my why this is happening.

    following is the code wich i tried...

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>My Test Page</title>
    <script type="text/javascript">
    function addEvent()
    {
    	var  gDivList = document.getElementsByName("gallery");
    	alert(gDivList.length);
    } 
    </script>
    </head>
    <div class="leftnavgallery" name="gallery">&nbsp;</div>
    <div class="leftnavgallery" name="gallery">&nbsp;</div>
    <div class="leftnavgallery" name="gallery">&nbsp;</div>
    <div class="leftnavgallery" name="gallery">&nbsp;</div>
    <div class="leftnavgallery" name="gallery">&nbsp;</div>
    <div class="leftnavgallery" name="gallery">&nbsp;</div>
    <div class="leftnavgallery" name="gallery">&nbsp;</div>
    <div class="leftnavgallery" name="gallery">&nbsp;</div>
    <div class="leftnavgallery" name="gallery" >&nbsp;</div>
    <div class="leftnavgallery" name="gallery">&nbsp;</div>
    <div class="leftnavgallery" name="gallery">&nbsp;</div>
    <div class="leftnavgallery" name="gallery">&nbsp;</div>
    <div class="leftnavgallery" name="gallery">&nbsp;</div>
    <div class="leftnavgallery" name="gallery">&nbsp;</div>
    <div class="leftnavgallery" name="gallery">&nbsp;</div>
    <div class="leftnavgallery" name="gallery">&nbsp;</div>
    <div class="leftnavgallery" name="gallery">&nbsp;</div>
    <div class="leftnavgallery" name="gallery">&nbsp;</div>
    <div class="leftnavgallery" name="gallery">&nbsp;</div>
    <script type="text/javascript">addEvent();</script>
    </body>
    </html>

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,255
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)

    name

    I still get confused about how different browsers treat "name"s and "id"s, but shouldn't an element's name be unique?

    EDIT:
    I just did as bit of searching and found examples both at w3schools and MSDN that had multiple tags with the same name. So I guess it must be something else causing a problem.

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The <body> tag is missing so the HTML is not valid. Maybe that is the cause.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Name is only valid on input elements, not div elements. Thus, IE only searches for inputs.

  5. #5
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,255
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)

    getElementsByName

    :d'oh: I didn't notice the missing body tag.
    And, although both examples say "all elements with" they do both show input tags in the example code. Maybe it would be better to use XPath and a regex with some kind of valid attribute values instead?

  6. #6
    SitePoint Enthusiast codlib's Avatar
    Join Date
    Jan 2007
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the body tag is present in the original source... it is missed when i am copy paste the necessarily tags to site point editor... it is not working still if there is a body tag. and i think Fotiman's comment is true..... i dint find any other problem in it.

  7. #7
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could use the Yahoo UI Library to get elements by name. Like so:

    [code]
    <script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script type="text/javascript">
    var gDivList = YAHOO.util.Dom.getElementsBy(function(el) {
    return (el.getAttribute("name") == "gallery");
    });
    </script>
    [code]

    I haven't tested it, but it should work.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    With the original code, you don't want to go naming multiple attributes as you have done. If you want an array of the elements, I would do it with a single identifier instead, which keeps the code a lot cleaner.

    Code HTML4Strict:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>My Test Page</title>
    <script type="text/javascript">
    function addEvent()
    {
    	var el = document.getElementById("gallery");
    	var gDivList = el.getElementsByTagName('div');
    	alert(gDivList.length);
    	console.log(gDivList);
    } 
    </script>
    </head>
    <body>
    <div id="gallery">
        <div class="leftnavgallery">&nbsp;</div>
        <div class="leftnavgallery">&nbsp;</div>
        <div class="leftnavgallery">&nbsp;</div>
        <div class="leftnavgallery">&nbsp;</div>
        <div class="leftnavgallery">&nbsp;</div>
        ...
    </div>
    <script type="text/javascript">addEvent();</script>
    </body>
    </html>

    The class name should also be moved up to the surrounding div, and because the id and class are used only on the same element, you can use just the id attribute instead. If there are multiple areas that share the same design, then a class can be used to distinguish between the two.

    The inner div's should also use a more semantic tag, such as a paragraph, but that depends on how you are going to structure the content.

    Code HTML4Strict:
    <div id="leftnavgallery" class="gallery">
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        ...
    </div>
    Then you can use CSS selectors to target the appropriate elements

    Code CSS:
    #leftnavgallery {
        width: 5em;
    }
    #leftnavgallery p {
        margin: 0.5em;
    }
    .gallery {
        color: #f00; /* harsh red */
        background-color: #0f0; /* virulent green */
    }

    Well, maybe not those colors, but these things can be considered for later.
    Last edited by paul_wilkins; Jan 18, 2008 at 02:24.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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