Tuesday, May 28, 2024
 Popular · Latest · Hot · Upcoming
193
rated 0 times [  198] [ 5]  / answers: 1 / hits: 28708  / 12 Years ago, tue, december 18, 2012, 12:00:00
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


More From » javascript

 Answers
25

getElementsByClassName() always gives you a nodeList object, even if it had only one member. NodeList 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...) {
......
}

[#81350] Monday, December 17, 2012, 12 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
frederickmohamedw

Total Points: 21
Total Questions: 123
Total Answers: 105

Location: The Bahamas
Member since Tue, Apr 27, 2021
3 Years ago
frederickmohamedw questions
Wed, Sep 23, 20, 00:00, 4 Years ago
Sat, Jul 18, 20, 00:00, 4 Years ago
Sun, Apr 26, 20, 00:00, 4 Years ago
Sat, Jan 11, 20, 00:00, 4 Years ago
Fri, Dec 27, 19, 00:00, 5 Years ago
;