Javascript not displaying in internet explorer 7 and 8

Question

This seem to no be working in ie7 and ie8, is there a simple fix for this?

  var collapsables = document.getElementsByClassName('collapsable');

function unhide(divID) {

  // Hide previous
  for (var i = 0; i < collapsables.length; i++) {
    collapsables[i].className = 'collapsable hidden';
  }

  // Show new
  var item = document.getElementById(divID);
  if (item) {
    item.className = 'collapsable';
  }
}

[`getElementsByClassName`](https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName) minimum version with support IE9 Shim http://stackoverflow.com/questions/16777885/get-all-elements-by-classname-and-change-classname/16778755#16778755 — Xotic750, Jan 27 '14 at 15:32

score 0 · Answer 1 · answered Jan 27 '14 at 15:39

Try to use: var collapsables = document.querySelector('.collapsable');

querySelector supported from IE8

But if you need IE7, try to use dirty hack:

if(document.getElementsByClassName == undefined) { 
   document.getElementsByClassName = function(cl) { 
      var retnode = []; 
      var myclass = new RegExp('\\b'+cl+'\\b'); 
      var elem = this.getElementsByTagName('*'); 
      for (var i = 0; i < elem.length; i++) { 
         var classes = elem[i].className; 
         if (myclass.test(classes)) { 
            retnode.push(elem[i]); 
         } 
      } 
      return retnode; 
   } 
};

You should understand - this is very slow operation. This function iterates all DOM elements

Slow when compared to the native method. But an average of 300ops/sec is plenty for me. — Xotic750, Jan 27 '14 at 17:09

score 0 · Answer 2 · edited May 23 '17 at 12:03

I'll bet this will get closed because it is a duplicate pretty soon, but Web_Designer has a nice working solution posted here.

Web_Designers solution for IE versions prior to IE9:

function getElementsByClassName(node, classname) {
    var a = [];
    var re = new RegExp('(^| )'+classname+'( |$)');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}

Usage:

var tabs = getElementsByClassName(document.body,'collapsable');

Javascript not displaying in internet explorer 7 and 8

2 Answers2