Javascript doesn't seem to be reading my class names properly for some divs but not all

Question

I have 15 div tags in my code. Not only did I count in my code manually but I checked in the dom using firebug and output an alert for each iteration through

    var toShow2 = document.getElementsByTagName("div");


    for (var j=0;j<toShow2.length; j++) {
        alert(toShow[j].className + " class iteration:" + j + "; checking for (show): " + show + "; checking for (hide): " + hide);
        if (toShow[j].className.indexOf(show) > -1) {

            var style = toShow[j].style;
            style.display = "block";
        }
        if (toShow[j].className.indexOf(hide) > -1) {

            var style = toShow[j].style;
            style.display = "none";
        }
    }

The alert displays the className (if any), the current iteration(0-14), the first parameter it is looking for(show) and the 2nd parameter it is looking for(hide). For all 15 divs (excluding the first) there is a single class name but it only recognizes a class name even exist on the 5th and 12th position start with 0) This code is inside a function and the function can pass 2 variables: step1, step2, step3, step4, or step5. It recognizes the step1 class name on the 5th position and step2 on the 12th position otherwise the

toShow[j].className

in the alert comes up as nothing.

The order of class names that come up in the dom for all divs is this.

1. [no class name]
2. step1
3. step2
4. step3
5. step4
6. step5
7. step2
8. step3
9. step4
10. step5
11. step1
12. step2
13. step3
14. step4
15. step5

I've checked the class names in my html code and they match up exactly with what I'm searching for as outputted in my alert. Any help would be appreciated.

Answer 1

At a quick glance, is this what you wanted? Haven't tested or anything. show and hide aren't defined so you are passing in an undefined variable.

var toShow2 = document.getElementsByTagName("div");


for (var j=0;j<toShow2.length; j++) {
    alert(toShow[j].className + " class iteration:" + j + "; checking for (show): " + show + "; checking for (hide): " + hide);
    if (toShow[j].className.indexOf('show') > -1) {

        var style = toShow[j].style;
        style.display = "block";
    }
    if (toShow[j].className.indexOf('hide') > -1) {

        var style = toShow[j].style;
        style.display = "none";
    }
}

Answer 2

The problem is that you are using toShow in the loop, but the loop is based on toShow2. Fix it as follows:

 var toShow2 = document.getElementsByTagName("div");


    for (var j=0;j<toShow2.length; j++) {
        alert(toShow2[j].className + " class iteration:" + j + "; checking for (show): " + show + "; checking for (hide): " + hide);
        if (toShow2[j].className.indexOf(show) > -1) {

            var style = toShow2[j].style;
            style.display = "block";
        }
        if (toShow2[j].className.indexOf(hide) > -1) {

            var style = toShow2[j].style;
            style.display = "none";
        }
    }