Question

I am trying to switch a series of blocks between “none” and “block” based on the OnMouseOver property and to change the title of the selected list to yellow at the same time. The JavaScript code I have for this is:

function switchCat(cat) {
    var uls = document.getElementsByClassName('lower-ul');
    var titles = document.getElementsByClassName('lower-cat-title');
    for (var i=0;i<uls.length;i++) {
        uls[i].style.display = 'none';
        titles[i].style.color = 'white';
    }
    if (cat != -1) {
        var wanted = document.getElementById('lower-cat-'+cat);
        var wantedTitle = document.getElementById('lower-cat-title-'+cat);
        wanted.style.display = 'block';
        wantedTitle.style.color = 'yellow';
    }
}

It works with Chrome, Opera, and Firefox, however, it does not work with IE. When I test it in IE I get the error “Object doesn’t support this property or method.” Does anyone know what I am doing wrong?

Answer 1

IE unfortunately does not support document.getElementsByClassName.

Add your own support

However, you can add support to this. You can create your own function, such as the following:

document.getElementsByClassName = function(class_name) {
    var docList = this.all || this.getElementsByTagName('*');
    var matchArray = new Array();
    var re = new RegExp("(?:^|\\s)"+class_name+"(?:\\s|$)");
    for (var i = 0; i < docList.length; i++) {
        if (re.test(docList[i].className) ) {
            matchArray[matchArray.length] = docList[i];
        }
    }
    return matchArray;
}

(From here.)

Even easier

Even easier, if you want to, you can use the amazing jQuery to select elements by class name and id:

function switchCat(cat) {
    $(".lower-ul").css({
        display:"none"
    });
    $(".lower-cat-title").css({
        color:"white"
    });
    if (cat != -1) {
        $("lower-cat-"+cat).css({
            display:"block"
        });
        $("lower-cat-title-"+cat).css({
            color:"yellow"
        });
    }
}

More cleaner!