Changing CSS via Javascript does NOT work in IE8 for me

Question

I have a small snippet of code that I'm running to switch some DIV tags on and off contingent upon events happening on the page. This code is as follows:

function toggleBack() {
    var list = document.getElementsByClassName('innerContentForEmailCapture');
    var list2 = document.getElementsByClassName('mpRight');
    var list3 = document.getElementsByClassName('mpBtns');
    try {
        for (var i = 0; i < list.length; i++) {
            list.item(i).style.display = 'none';
        }
        for (var ii = 0; ii < list2.length; ii++) {
            list.item(ii).style.display = 'block';
        }
        for (var iii = 0; iii < list3.length; iii++) {
            list.item(iii).style.display = 'block';
        }
    } catch(err) {
        alert(err);
    }
}

Mind you, this code does exactly what I want it to do when it's called, Except when dealing with ie8. When using this code there I receive an error message that states:

TypeError: Object doesn't support this property or method

I'm not entirely sure what I am doing wrong here. The idea is to turn the display to none for any DIV with the class "innerContentForEmailCapture" and turn the display to block for any DIV with the classes of "mpRight" and "mpBtns".

Is there a simpler way? One that would allow the behavior to work in ie8?

Answer 1

The problem is with your

document.getElementsByClassName 

this function is not supported on IE8. You'd better use

document.querySelectorAll

so you would have:

document.querySelectorAll('.innerContentForEmailCapture')
document.querySelectorAll('.mpBtns')
document.querySelectorAll('.mpRight')

Or, if you need to use getElementsByClassName you can use some polyfills like this