Why does this JavaScript work for FF and not IE8

Question

I have just found out after half a year that an IE cannot process this script and now that my programmer is gone I'm stuck with it myself :-(

It works fine in FF

This is the code:

function updateFields(name, value) {
  var elements = getElementsByClass('field_' + name);
  for(var i=0; i<elements.length; i++) {
    var e = elements[i];
    while(e.firstChild != null) { e.removeChild(e.firstChild); }
    e.appendChild(document.createTextNode(value + ' '));*
  } // for i
} // updateFields()

My IE debugger complains about the line marked with *. It says: Error: Unexpected call to method or property access.

Can anybody spend some of his/her precious time to help? Please write answers as if I'm a four-year-old.

function getElementsByClass(cls) {
  var fields = document.getElementsByTagName('*');
  var r = new Array();

  for(var i=0; i<fields.length; i++) {
    var f = fields[i];

    var a = f.getAttribute('class');
    if(a == null)
      a = f.className;

    if(a == null)
      continue;

    var classes = a.split(' ');
    for(var j=0; j<classes.length; j++) {
      if(classes[j] == cls) {
        r.push(f);
        break;
      } // if
    } // for j
  } // for i

  return r;
}

Button:

<form>
  <p class="center">
    <input type="button" onclick="javascript:book_wire_transfer();" style="border: none;      border:0;"\>


  <p class="center">
    <img src="http://www.-.com/images/text/arrow_left_small.png" alt="&raquo;" class="middle" />
    <span class="submit">
      <input class="submit" type="submit" value="Book now"  />
    </span>
    <img src="http://www.-.com/images/text/arrow_right_small.png" alt="&laquo;" class="middle" />
    </p>

  </p>
  </form>

If you in IE hit F12 it opens a new window (the debugger-window in IE). At the top-bar in that window you can see both browser-mode and document-mode. — Alxandr, May 29 '11 at 17:37

score 2 · Answer 1 · answered May 29 '11 at 19:37

There are elements that IE8 and below cannot add textNodes to, though IE9 and other browsers do.

option element(use optionelement.text)
input element(use inputelement.value)
style element(use styleelement.styleSheet.cssText)
script element(use scriptelement.text)

Domenic · Answer 2 · 2011-05-29T18:12:46.227

1

getElementsByClass is not a built-in function, so it probably comes from some other library you are using that is incompatible with IE8. In this case, it is probably returning something that is not a valid set of DOM nodes.

If you could post what that method does, that would help us in debugging. Otherwise, you could try using document.querySelectorAll('.field_' + name) instead and see if that fixes it; this is supported in IE8 onwards, at least if you are in standards mode.

EDIT: your custom getElementsByClass function looks OK, although without unit tests it's hard for me to be 100% sure. One way to test would be to try and replace the body of getElementsByClass with return document.querySelectorAll('.field_' + name) and see if that fixes it... In this way, the getElementsByClass function still exists, so all your other code is not broken, but it may be more correct.

edited May 29 '11 at 18:12

answered May 29 '11 at 17:40

Domenic

110,262
41
219
271

1

document.getElementsByClassName is undefined in IE-quirks-mode. – Alxandr May 29 '11 at 17:42
Even in IE8?? Damn!! OK, fixed with `querySelectorAll` recommendation. – Domenic May 29 '11 at 17:44
Quirks-Mode is made to be backwards-compatible. It doesn't exist in IE9-quirks either. However, in normal-mode it does. – Alxandr May 29 '11 at 17:47
Oh of course, you're right about that, but what's surprising is it doesn't exist in IE8 standards mode either O_o. – Domenic May 29 '11 at 17:47
@Tom ugh if you could edit your post to include that, properly formatted, that would be much better than me trying to read it in the comment form. – Domenic May 29 '11 at 17:59
Nope I meant edit your original post, not put it in a comment. – Domenic May 29 '11 at 18:02
I would like to avoid changing the name unless it's necessary. This website is huge and I don't know how many templates are referring to that name. – Tom May 29 '11 at 18:07
@Domenic I tried to end the function with your suggestion but it resulted in that the previous page complained about it. It all starts with this button see above.....maybe that helps. – Tom May 29 '11 at 18:27

score 0 · Answer 3 · answered May 29 '11 at 19:18

0

well, remove the * at the end of

 e.appendChild(document.createTextNode(value + ' '));*

answered May 29 '11 at 19:18

Anze Jarni

1,141
7
7

Why does this JavaScript work for FF and not IE8

3 Answers3