Question

Okay, obviously I’m new to javascript. I’m trying to use radio buttons to hide divs by class, my function needs to hide all the divs with either class name “p12” or “p34” when a single radio is clicked.

BUT

This is only working for all the p12 divs…. what am I missing to make both?..

if (document.getElementById('numbofextras0').checked == true) {
    for(i=0; i<100; i++) 
        document.getElementsByClassName('p12')[i].style.display = 'none';

    for(i=0; i<100; i++) 
        document.getElementsByClassName('p34')[i].style.display = 'none';
}

Answer 1

I wouldn’t be surprised if it doesn’t like you possibly going outside the range of what the getElementsByClassName returns (but then again, I haven’t tested/checked what would happen). Try storing the results first, then looping through them.

var p12s = document.getElementsByClassName('p12');
for (var i = 0; i < p12s.length; i++) {
    p12s[i].style.display = "none";
}

var p34s = document.getElementsByClassName('p34');
for (var i = 0; i < p34s.length; i++) {
    p34s[i].style.display = "none";
}

This way, it loops over the exact amount of elements (you don’t have hardcode 100 in) that each getElementsByClassName returns.

The main problem is that when you hardcode 100 in, it will always loop from 0 to 99. If getElementsByClassName returns less than 100 elements, trying to access that index will return undefined and throw an exception when you try to do something like .style.display = "none";. Or what if there’s 160 elements returned? Only the first 100 will be modified. Making the call before the loop and storing the returned elements in a variable, then looping through that length, is the safe/correct way. The way you had it before, it was making a call to getElementsByClassName on every loop iteration – very inefficient – you only need to do it once!…and of course, hardcoding 100 wasn’t the best way to loop through the elements. It was all the right idea, just not the right order. I mean, technically, you could’ve done something like this:

for (i=0; i<100; i++) {
    var el = document.getElementsByClassName('p12')[i];
    if (el) {
        el.style.display = 'none';
    }
}

But like I said, calling getElementsByClassName on every loop iteration isn’t very efficient.