Question

function CheckavailOnload()
{
  var elems = document.getElementsByClassName('box-collateral box-related');
  for(var i = 0; i < elems.length; i++){
  if(elems.style.visibility == 'visible')
  {
     var av = document.getElementsByClassName('availability in-stock');
     for(var i = 0; i < elems.length; i++) {
     av[i].style.visibility = 'visible';
    }
  }
  else
  {
     var av = document.getElementsByClassName('availability in-stock');
     for(var i = 0; i < elems.length; i++) {
     av[i].style.visibility = 'hidden';
    }
  }
 }
}
CheckavailOnload();

here i am trying to check the visibility of div “box-collateral box-related” if it is visible i want to toggel the visibility of another paragraph with class name “availability in-stock”

Answer 1

getElementsByClassName() always gives you a HTMLCollection object, even if it had only one member. HTMLCollection object doesn’t have style property, hence you need to iterate elems in the first if to check the visibility, just like you’ve done further in your code.

If you’re sure there’s only one member, you can check it’s visibility by using elems[0].style.visibility.

If you want to check the visibility of a particular element, you can give it an id and get that element using document.getElementById().

---

EDIT

Thanks for a fiddle, now we can have some results.

So, maybe you don’t need that id, the actual problem occurs when trying to get style, if it’s not explicitely assigned. To tackle this, you need to use getComputedStyle():

function CheckavailOnload() {
var elems = document.getElementsByClassName('box-collateral box-related');
    for (var i = 0; i < elems.length; i++) {
        if (getComputedStyle(elems[i]).visibility == 'visible' || getComputedStyle(elems[i]).display == 'block') {
            alert("hello");
            var av = document.getElementsByClassName('availability in-stock');
            for (var j = 0; j < av.length; j++) {
                av[j].style.visibility = 'visible';
            }
        }
        else if (getComputedStyle(elems[i]).visibility == 'hidden' || getComputedStyle(elems[i]).display == 'none') {
            var av = document.getElementsByClassName('availability in-stock');
            for (var k = 0; k < av.length; k++) {
                av[k].style.visibility = 'hidden';
            }
        }
    }
}
window.onload = CheckavailOnload;

This code will check all elements assigned to classes box-collateral box-related. A working demo at jsFiddle.

Notice also use of window.onload, which makes sure, that you’re not trying to get elements before they are parsed. I switched elems to av in for...j– and for...k -loops, supposed to work correctly, if there were different number of elements in elems and av.

If the first found element with maintioned classes is the one to check, you can simply replace i with 0 in all elems[i] expressions.

If you want to check only a particular element, you can give it an id, and get a reference to it with getElementById(). In HTML:

<div id="checkThisOnly" class="box-collateral box-related">

And then in the script:

var elem = document.getElementById('checkThisOnly');
if (getComputedStyle(elem).visibility...) {
    ......
}