getElementsByClassName & IE8: Object doesn't support this property or method

I know "getElementsByClassName" is not support by IE8. Do you know what can I use instead? I am getting annoying by error

> "Object doesn't support this property or method".

The HTML code is:

function sumar() {
var elems = document.getElementsByClassName('verdana14 toAdd');
var myLength = elems.length;
total = 0;
for (var i = 0; i < myLength; ++i) {
   if (elems[i].value!="") {
	   total += parseInt(elems[i].value,10);
	   }
	}
 
var promedio = total/myLength;
parseFloat(document.getElementById('promediocal').value = promedio.toFixed(2));
}

This the input text that calls the javascript function:

<input name='AE_EA_1_BIV_003_2' type='text' class='verdana14 toAdd' id='AE_EA_1_BIV_003_2' style='width:50px' onChange='sumar()'/>
<input name='AE_EA_1_BIV_003_3' type='text' class='verdana14 toAdd' id='AE_EA_1_BIV_003_3' style='width:50px' onChange='sumar()'/>
<input name='AE_EA_1_BIV_003_4' type='text' class='verdana14 toAdd' id='AE_EA_1_BIV_003_4' style='width:50px' onChange='sumar()'/>

Use document.querySelectorAll('.verdana14.toAdd').

See also my related blog post.

getElementsByClassName method is not supported by IE8.

You should use document.querySelectorAll('.classname') (works in IE8+) or a library that implements that functionality - like:

• jQuery

• Moo Tools

• DOJO

• YUI

• Prototype

  ... Among others...

---

querySelectorAll support:

http://www.quirksmode.org/dom/w3c_core.html#t13

getElementsByClassName support:

http://www.quirksmode.org/dom/w3c_core.html#t11

You could write your own. Something like:

function GEBCN(cn){
    if(document.getElementsByClassName) // Returns NodeList here
        return document.getElementsByClassName(cn);

    cn = cn.replace(/ *$/, '');

    if(document.querySelectorAll) // Returns NodeList here
        return document.querySelectorAll((' ' + cn).replace(/ +/g, '.'));

    cn = cn.replace(/^ */, '');

    var classes = cn.split(/ +/), clength = classes.length;
    var els = document.getElementsByTagName('*'), elength = els.length;
    var results = [];
    var i, j, match;

    for(i = 0; i < elength; i++){
        match = true;
        for(j = clength; j--;)
            if(!RegExp(' ' + classes[j] + ' ').test(' ' + els[i].className + ' '))
                match = false;
        if(match)
            results.push(els[i]);
    }

    // Returns Array here
    return results;
}

Will work pretty well, but you could write a faster one if you want to. Then you can just change:

document.getElementsByClassName('verdana14 toAdd');

To:

GEBCN('verdana14 toAdd');

use jQuery, or filter the results from getElementsByTag

you may try using jquery as it have alternative class selector to get the elements by there class names. $(".testclass").each... it will give you required elements by class names