javascript - Uncaught TypeError: Cannot read property 'visibility' of undefined

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"

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"

Share Improve this question edited Dec 19, 2012 at 2:10 asked Dec 18, 2012 at 17:45 geeta battin 732 gold badges2 silver badges6 bronze badges

2 Well right off the bat, syntax highlighting shows you are missing a quote... 'hidden'. Although that could just be a copy paste error... – Lix Commented Dec 18, 2012 at 17:47
and check the type of the nodes before assigning attributes to them. Some nodes don't have attributes at all =) – el Dude Commented Dec 18, 2012 at 17:50
Uncaught SyntaxError: Unexpected token ILLEGAL error is ing – geeta battin Commented Dec 18, 2012 at 21:51
@gee - Did you see my ment on the missing quote? – Lix Commented Dec 18, 2012 at 22:03
At the same time i want to move upward another div if'box-collateral box-related' visiblity is hidden – geeta battin Commented Dec 18, 2012 at 22:17

| Show 2 more ments

3 Answers 3

Sorted by: Reset to default 9

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

"elems" is a set of elements yet you try to look at its "style" property. You need to rearrange things so you loop through elems and then check the property on each one.

Also on your later loops through av - you are looking at elems.length for the scan. I think this is a bit confused.

So, as I mentioned in my ment, you seem to be missing a quote around the word "hidden". I'm going to assume that it's a copy paste error.

Here is a stripped down version of your code that demonstrates one way to achieve your goal -

function Checkavailability()
{
  var elems = document.getElementsByClassName('box-collateral box-related');
  for (var i=0; i<elems.length; i++) {
    if(elems[i].style.visibility == 'visible'){
      // do some stuff
    }
    else{
       // do some stuff
    }
  }
}

The main difference here is that we are itearating over all of the elements that getElementsByClassName returns. Note the plural in the function name -

getElementsByClassName - Returns a set of elements which have all the given class names.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Uncaught TypeError: Cannot read property 'visibility' of undefined - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)