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

• 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

4 Answers 4

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"/>