Uncaught TypeError: Cannot read property 'visibility' of undefined

javascript

Solution

`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...) {
    ......
}

Problem

Original source