IE getElementById Bug Strikes Again

By Chris on Apr 5, 2007 | In Standards, Scripting, Programming, Bugs, "Features" & Things Not Right | 5 feedbacks »

I was burned by the document.getElementById() may return incorrect element in IE and Opera bug again today. This time though it was particularly bothersome as I spent the better part of the afternoon trying to figure out why I couldn't access the length property of the value of a textarea element in IE when the same code worked fine in Firefox. I mean, getting the length of a value of any form element through JavaScript usually isn't like rocket science.

<textarea id="description" name="description">Here is some text</textarea> <script type="text/javascript"> var myElement = document.getElementById('description'); alert(myElement.value.length); //alert: 17 </script>

Every time I tried to execute that code in IE it would complain that 'value.length' is null or not an object. After a whole crap load of debugging I finally tracked it down to the fact that IE was actually referencing the <meta name="description"> tag in the head section of the page. Yeah, see even though the function is getElementById, IE still thought I meant the element with the name attribute equal to "description". Or as my brother put it in a comment to the original post (before the comments were wiped in the great Data Loss of '06), maybe IE thought I was calling the getJustAboutAnythingIFeelLike() function... Damn you IE for making me have to change my ID attributes to suite your leisurely implementation of the DOM!

Trackback address for this post

5 comments

Comment from: Todd [Visitor]

· http://www.savagevenus.net

That's an interesting little quirk! I'll have to remember that for my future endevors.

I've come across many little bugs like this lately (mostly because I've been forced to test with IE7 lately.. thankyouverymuch Automatic Updates!).

It's becoming more and more like an onion.. the more you unravel and dig deeper in to it, the more it stinks!

04/06/07 @ 10:03

Comment from: Noid [Visitor]

Brilliant. Thank you. I built a form in Firefox - and it worked fine... but in IE I was getting 'undefined' for the value of my textarea. It was driving me crazy - I was about to fork my javascript until I found your page in the search engines. I just had to rename the ID of the textarea. Thanks again!

04/27/07 @ 15:50

Comment from: Chris W [Visitor]

The Dojo Toolkit's dojo.byId() contains a "fix" for precisely this problem. I now never use just plain document.getElementById() thanks to this bug. Here's what I use (lightly adapted from Dojo):



// use $('myId') instead of document.getElementById('myId')



var $ = function (id, doc) {

 if((id)&&((typeof id == "string")||(id instanceof String))){

    if (!doc) { doc = document; }

    var ele = doc.getElementById(id);

    // workaround bug in IE and Opera 8.2 where getElementById returns wrong element

    if (ele && (ele.id != id) && doc.all) {

      ele = null;

      // get all matching elements with this id

      eles = doc.all[id];

      if (eles) {

        // if more than 1, choose first with the correct id

        if (eles.length) {

          for (var i=0; i < eles.length; i++) {

            if (eles[i].id == id) {

              ele = eles[i];

              break;

            }

          }

        // return 1 and only element

        } else { ele = eles; }

      }

    }

    return ele;

  }

  return id; // assume it's a node

}

05/10/07 @ 23:32

Comment from: alfredo [Visitor]

· http://www.alfredonline.es

Thank you, after a couple hours I've solved a getElementById problem thanks to your comments!
Great!
Regards.

10/23/07 @ 14:49

Comment from: Roger [Visitor]

@Chris,

That fix is pretty good, but it could be better. See workaround #3 on this site:
(Google "Web Bug Track getElementById")
(i tried to give a link but this site refused any urls)

It gets around the obj.id bug (that yours doesn't), and it loops only the real possible matches (e.g. start looping at 1 (one) because you KNOW the first match is WRONG!)

02/18/08 @ 15:29

Comment feed for this post