I want to show a picture on when I click a button(on)and when I click button (off) will hide picture on and display picture off
I have this code the javascript runs in button(on)show picture on and button(off) hide picture on
so I need to show picture off when click button off and hide when click button on.
<button id="show-image-button" style="--clr:#0FF0FC"><span>on</span><i></i></button>
<br>
<button onclick="myFunction()" style="--clr:#0FF0FC"><span>off</span><i></i></button>
<br>
<img id="my-image" src="pump on.gif" alt="anim" style=" text-align: center; justify-content:center;display: none;width:130px;height:130px;">
<br>
<img src="pump off.png" alt="anima" style="display: none;width:120px;height:100px;">
<br>
<script>
function myFunction() {
document.getElementById("my-image").style.visibility = "hidden";
}
const showImageButton = document.getElementById("show-image-button");
const myImage = document.getElementById("my-image");
showImageButton.addEventListener("click", () => {
myImage.style.display = "block";
}
);
</script>
2
Answers
hi try to use the if statement and then use the test function on your button you can both the arrow function or the regular function method
Simplified function approach