Skip to content Skip to sidebar Skip to footer

Show/hide Element When Clicking Buttons

I have two buttons Show and Hide and I have an image so I want to know when I click the hide button the img will disappear and when I click show button it will appear again. And I

Solution 1:

window.onload = function(){
  var myImg = document.getElementById('myImg');
  
  document.getElementById('hideBtn').onclick = function(){
      myImg.style.display = 'none';
  };
  
  document.getElementById('showBtn').onclick = function(){
      myImg.style.display = '';
  };
  
  document.getElementById('toggleBtn').onclick = function(){
      var display = getComputedStyle(myImg).display=='none'?'':'none';
      myImg.style.display = display;
  };
}
<buttonid="hideBtn">Hide</button><buttonid="showBtn">Show</button><buttonid="toggleBtn">Toggle</button><br/><imgid="myImg"src="http://www.eastcottvets.co.uk/uploads/Animals/gingerkitten.jpg"alt="" />

Solution 2:

functionshow(){
  document.getElementById('image').style.display = "inline";
  }

functionhide(){
  document.getElementById('image').style.display = "none";
  }
<imgsrc="http://colorvisiontesting.com/images/plate%20with%205.jpg"width="80px"height="80px"id="image"/><br /><buttononClick="hide();">Hide</button><buttononClick="show();">Show</button>

Post a Comment for "Show/hide Element When Clicking Buttons"