I have a webpage where i have 3 images and I have a button to hide those images all at once on click, and then show them(this part is not implemented yet). I have a JS function for hiding them but it is not working and I have no idea why. So this is part of my code:

<div id="left"><img id="leftimage" name="leftimage" src="pic1url.jpg" style=
"visibility:visible"></div>

<div id="centerright">
    <div id="center"><img id="centerimage" name="centerimage" src="pic2url.jpg"
    style="visibility:visible"></div>

    <div id="right"><img id="rightimage" name="rightimage" src="pic2url.jpg"
    style="visibility:visible"></div>
</div><script type="text/javascript">
     var hideShowButton = document.getELementById("hideShowButton");
        hideShowButton.onclick = function()
        { 
            var allImages = { left:"leftimage"; center:"centerimage"; right:"rightimage"};
            if(document.getElementById("leftimage").style.visibility == 'visible')
            {
                for ( var image in allImages)
                { document.getElementById(allImages[image]).style.visibility = 'hidden';
                  document.getElementById(allImages[image+"1"]).style.visibility = 'hidden';
                                   document.getElementById(allImages[image+"2"]).style.visibility = 'hidden'; 
                }
        document.getElementById("hideShowButton").innerHTML = "Mostrar imagens";
            }
        }
</script>

<div id="buttons">
    <input id="hideShowButton" type="button" value="Hide Pics">
</div>

I have a webpage where i have 3 images and I have a button to hide those images all at once on click, and then show them(this part is not implemented yet). I have a JS function for hiding them but it is not working and I have no idea why. So this is part of my code:

<div id="left"><img id="leftimage" name="leftimage" src="pic1url.jpg" style=
"visibility:visible"></div>

<div id="centerright">
    <div id="center"><img id="centerimage" name="centerimage" src="pic2url.jpg"
    style="visibility:visible"></div>

    <div id="right"><img id="rightimage" name="rightimage" src="pic2url.jpg"
    style="visibility:visible"></div>
</div><script type="text/javascript">
     var hideShowButton = document.getELementById("hideShowButton");
        hideShowButton.onclick = function()
        { 
            var allImages = { left:"leftimage"; center:"centerimage"; right:"rightimage"};
            if(document.getElementById("leftimage").style.visibility == 'visible')
            {
                for ( var image in allImages)
                { document.getElementById(allImages[image]).style.visibility = 'hidden';
                  document.getElementById(allImages[image+"1"]).style.visibility = 'hidden';
                                   document.getElementById(allImages[image+"2"]).style.visibility = 'hidden'; 
                }
        document.getElementById("hideShowButton").innerHTML = "Mostrar imagens";
            }
        }
</script>

<div id="buttons">
    <input id="hideShowButton" type="button" value="Hide Pics">
</div>

• javascript
• html
• button

Share Improve this question Follow edited Mar 1, 2014 at 14:22 Spedwards 4,4921616 gold badges5959 silver badges119119 bronze badges asked Mar 1, 2014 at 14:05 echelonechelon 511 silver badge22 bronze badges 1

• jsfiddle demo please )) will be great! – Farkhat Mikhalko Commented Mar 1, 2014 at 14:08

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Before reading the answer, I highly suggest you learn how to use the browser's console. It will print all the errors that make your JavaScript code to crash. I also suggest you take some time to read JavaScript tutorials :)

There are many things wrong with your code. First, there is a typo "getELementById" (L is uppercase instead of lowercase). Second, you need to place the script tags bellow your button. Third, when creating an object, you should separate it's properties using mas (,) not semicolons (;) . Finally, you made a false use of the for loop. Just to help you out, here is the corrected code but don't expect people to do that for you every time. You need to find mistakes like these on your own in the future :)

<div id="left"> 
    <img src="pic1url.jpg" id="leftimage" style="visibility:visible" />
</div>

<div id="centerright">
    <div id="center">

        <img src="pic2url.jpg" id="centerimage" style="visibility:visible"/>
    </div>
    <div id="right">

        <img src="pic2url.jpg" id="rightimage" style="visibility:visible"/>
    </div>
</div>

<div id="buttons">
    <input type="button" value="Hide Pics" id="hideShowButton" />
</div>
<script  type="text/javascript">

    var hideShowButton = document.getElementById("hideShowButton");

    hideShowButton.onclick = function()
    { 
        var allImages = { left:"leftimage", center:"centerimage", right:"rightimage"};

        if(document.getElementById("leftimage").style.visibility == 'visible')
        {
            for ( var image in allImages)
            {
                document.getElementById(allImages[image]).style.visibility = 'hidden'; 
            }
            document.getElementById("hideShowButton").innerHTML = "Mostrar imagens";
        }
    }
</script>

Use can use diplay none or block property of css to hide and show any view respectively

<img id="one" src="pic1url.jpg" style="display:none;" />

Through javascript you can use this

document.getElementById(one).style.display = 'none';

Sorry, but your code is a bit messy. Why are you using a for statement if then you try to hide every image every time?

By the way, you're misusing the for...in statement. AllImages is a asociative array with no numeric indexes. for (var image in AllImages), image will be 'left', then 'center', then 'right' (the names of the properties of the object you're using). So a statement like

AllImages[image+1]

will return 'undefined' and your code will throw an error. Your code should look like this:

hideShowButton.onclick = function()
    { 
        var allImages = { left:"leftimage"; center:"centerimage"; right:"rightimage"};
        if(document.getElementById("leftimage").style.visibility == 'visible')
        {
            for ( var image in allImages)
            { 
                document.getElementById(allImages[image]).style.visibility = 'hidden';
            }
            document.getElementById("hideShowButton").innerHTML = "Mostrar imagens";
        }
    }

By the way, I suggest you to read some documentation about loops in javascript, like MDN