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.
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;
};
}
<button id="hideBtn">Hide</button>
<button id="showBtn">Show</button>
<button id="toggleBtn">Toggle</button>
<br/>
<img id="myImg" src="http://www.eastcottvets.co.uk/uploads/Animals/gingerkitten.jpg" alt="" />
function show(){
document.getElementById('image').style.display = "inline";
}
function hide(){
document.getElementById('image').style.display = "none";
}
<img src="http://colorvisiontesting.com/images/plate%20with%205.jpg" width="80px" height="80px" id="image"/><br />
<button onClick="hide();">Hide</button>
<button onClick="show();">Show</button>