CODEWITHSUNDEEP
javascripthtmlbutton
echelon
echelon

Reputation: 5

Hide/show images button JS

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>

Upvotes: 0

Views: 5968

Answers (3)

Oscar Paz
Oscar Paz

Reputation: 18292

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

Upvotes: 0

Muhammad Aamir Ali
Muhammad Aamir Ali

Reputation: 21087

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';

Upvotes: 2

Giwrgos Tsopanoglou
Giwrgos Tsopanoglou

Reputation: 1215

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 commas (,) 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>

Upvotes: 3

Related Questions