visibility hidden, javascript? - Stack Overflow

Can someone please tell me why my code isn't working correct, can't seem to figure out why, it's a really simple thing so I don't understand why I can't find the problem...

var pictures = document.getElementById('contents').getElementsByClassName('pictureSmall');
    for(k=0; k<pictures.length; k++){ 
        pictures[k].onclick = showPic;
        pictures[k].onblur = hidePic;
    }

function showPic(){
        var showPicture = this.getElementsByClassName('pictureBig')[0];
        showPicture.style.visibility = 'visible';

}

function hidePic(){
        var showPicture = this.getElementsByClassName('pictureBig')[0];
        showPicture.style.visibility = 'hidden';

}

this is the html:

    <div id="contents">
            <div class="pictureBig"><img src="bilder/boards.jpg" alt="cruisers"/></div>
        <div id="main" class="content">

            <img src="bilder/miniboardm.jpg" alt="minicruiser" id="boardsprice"/>
            <img src="bilder/miniboard2m.jpg" alt="minicruiser" id="boardgreen"/>
            <img class="pictureSmall" src="bilder/boardssmall.jpg" alt="minicruisers" id="boardsmall"/>
            <img class="pictureSmall" src="bilder/boardbluesmall.jpg" alt="shirt" id="small"/><div class="pictureBig"><img src="bilder/boards.jpg" alt="minicruisers"/></div>
            <img class="pictureSmall" src="bilder/postersmall.jpg" alt="minicruiser" id="small2"/><div class="pictureBig"><img src="bilder/boards.jpg" alt="minicruisers"/></div>
            <img src="bilder/boardcarving.jpg" alt="print" id="boardprint"/>
            <p></p>
        </div>
</div>

and this is the css:

.pictureBig {
    position:absolute; 
    display:none; 
    background-color:#EEE; 
    border:2px ridge #333; 
    padding:6px; 
    left:10px; 
    z-index:2; 
    margin-left:350px;
}

the message I get when I try to display the big picture is "Cannot read property 'style' of undefined".

Can someone please tell me why my code isn't working correct, can't seem to figure out why, it's a really simple thing so I don't understand why I can't find the problem...

var pictures = document.getElementById('contents').getElementsByClassName('pictureSmall');
    for(k=0; k<pictures.length; k++){ 
        pictures[k].onclick = showPic;
        pictures[k].onblur = hidePic;
    }

function showPic(){
        var showPicture = this.getElementsByClassName('pictureBig')[0];
        showPicture.style.visibility = 'visible';

}

function hidePic(){
        var showPicture = this.getElementsByClassName('pictureBig')[0];
        showPicture.style.visibility = 'hidden';

}

this is the html:

    <div id="contents">
            <div class="pictureBig"><img src="bilder/boards.jpg" alt="cruisers"/></div>
        <div id="main" class="content">

            <img src="bilder/miniboardm.jpg" alt="minicruiser" id="boardsprice"/>
            <img src="bilder/miniboard2m.jpg" alt="minicruiser" id="boardgreen"/>
            <img class="pictureSmall" src="bilder/boardssmall.jpg" alt="minicruisers" id="boardsmall"/>
            <img class="pictureSmall" src="bilder/boardbluesmall.jpg" alt="shirt" id="small"/><div class="pictureBig"><img src="bilder/boards.jpg" alt="minicruisers"/></div>
            <img class="pictureSmall" src="bilder/postersmall.jpg" alt="minicruiser" id="small2"/><div class="pictureBig"><img src="bilder/boards.jpg" alt="minicruisers"/></div>
            <img src="bilder/boardcarving.jpg" alt="print" id="boardprint"/>
            <p></p>
        </div>
</div>

and this is the css:

.pictureBig {
    position:absolute; 
    display:none; 
    background-color:#EEE; 
    border:2px ridge #333; 
    padding:6px; 
    left:10px; 
    z-index:2; 
    margin-left:350px;
}

the message I get when I try to display the big picture is "Cannot read property 'style' of undefined".

• javascript
• visibility

Share Improve this question Follow edited Jun 12, 2013 at 17:22 Julius Vainora 48.3k99 gold badges9494 silver badges106106 bronze badges asked Jun 5, 2013 at 12:09 spovellspovell 13333 silver badges1313 bronze badges 4

• Could you use chrome or firefox debugger? With Firefox you can install the Firebug plugin. Press F12 to see the console and it'll show you the line the error occurred. In your code you can use console.log(something); to see if your variables have the expected value. – HMR Commented Jun 5, 2013 at 12:12
• it means that JavaScript is not able to figure out what you mean by this.getElementsByClassName('pictureBig')[0]; – Harsha Venkataramu Commented Jun 5, 2013 at 12:12
• you can try jquery for this it so simple to implement – Ganesh Bora Commented Jun 5, 2013 at 12:40
• try adding style tag in img <img src="bilder/miniboardm.jpg" alt="minicruiser" id="boardsprice" style="visibility:hidden"/> – Ganesh Bora Commented Jun 5, 2013 at 12:44

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

You should use

var showPicture = document.getElementsByClassName("pictureBig")[0];

document.getElementsByClassName is not supported in all Browsers. You should instead use document.querySelector or document.querySelectorAll which works in almost all Browsers including IE8+.

You could try this:

function showPic(){
        var showPicture = this.
          parentElement.parentElement.getElementsByClassName('pictureBig')[0];
        showPicture.style.visibility = 'visible';

}

function hidePic(){
        var showPicture = this.
          parentElement.parentElement.getElementsByClassName('pictureBig')[0];
        showPicture.style.visibility = 'hidden';

}

try adding style attribute in img tag as below

    <img src="bilder/miniboardm.jpg" alt="minicruiser" 
id="boardsprice" style="visibility:hidden"/>