1

I'm a beginner programmer and I wanted to have an image loaded but not displayed:

<img src="someImage.png" class="mainImage" id="image1" style="display:none"/>

I want to add a button which would then remove/change the image display from none to make it visible, so that each image could be displayed by clicking on a button.

Thanks!

DingleBazzle Juanito
  • 11
  • 1
  • 2

2 Answers2

2

You can toggle the element's display between block and "" (empty string). So you might have a button like:

<button onclick="toggleDisplay('image1')">Image 1</button>

And a toggleDisplay function like:

function toggleDisplay(id) { 
  var el = document.getElementById(id);
  if (el && el.style) {
    el.style.display = el.style.display != 'none'? 'none' : '';
  } 
}

Toggling between none and "" (empty string) allows the element to return to its default or inherited value and the function becomes generic.

RobG
  • 142,382
  • 31
  • 172
  • 209
-1

Try this

$("#btn").click(function(){
    $("#image1").show();
});

Or

$("#btn").click(function(){
     $("#image1").css("display", "block");
 });
progrAmmar
  • 2,606
  • 4
  • 29
  • 58