1

I want to toggle the visibility on and off. So the second click on the button should hide the image again. How do I do this?

This is my current code which only toggles the hidden .png on.

<div>
<script type="text/javascript">
    function showImage(){
        document.getElementById('loadingImage').style.visibility='visible';
    }
</script>

<input id="text" type="button" value="Explosion Button" onclick="showImage();"/>
<img id="loadingImage" src="explosions.png" style="visibility:hidden"/>

Thanks!

Celfurion
  • 58
  • 1
  • 6

1 Answers1

2

You can do that in many ways. A basic sample .Check if the element is visible if yes the hide else show the element

function showImage(){
        document.getElementById('loadingImage').style.visibility=    document.getElementById('loadingImage').style.visibility == 'visible'? 'hidden' : 'visible';
    }
<div>  
  <input id="text" type="button" value="Explosion Button" onclick="showImage();"/>
  <img id="loadingImage" src="explosions.png" style="visibility:hidden"/>
</div>
XYZ
  • 4,450
  • 2
  • 15
  • 31
  • Awesome, but how do I apply this if I have more than 1 button that needs to hide and show an image? I edited a second with with "showImage2" and "loadingImage2", but they won't work together with the existing show/hide button. – Celfurion Jun 11 '17 at 16:27
  • @Celfurion there are many ways to hide and show a div.You can check this answer for more details https://stackoverflow.com/questions/21070101/show-hide-div-using-javascript – XYZ Jun 11 '17 at 16:39