const image = document.getElementById('yourImage');
image.addEventListener("click", (event) => {
// Do stuff with your event!
});<!DOCTYPE html>
<html>
<head>
<style>
/* Set display to none for image*/
#image {
display: none;
}
</style>
</head>
<body>
<div>
<!-- Add id to image -->
<img id="image" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png"
alt="GFG image" />
</div>
<button type="button"
style="background: url(myimage.png)"
onclick="show()" id="btnID">
Show Image
</button>
<script>
function show() {
/* Access image by id and change
the display property to block*/
document.getElementById('image')
.style.display = "block";
document.getElementById('btnID')
.style.display = "none";
}
</script>
</body>
</html>