Change Image Onclick For A Set Amount Of Time
I have 3 images that I switch between. Goal: First I want to show the happy face image. When the user clicks on the happy face image I want to change it to a sad face image for 1
Solution 1:
you can use setTimeout()
, make a function to reset image src, and use a timeout to call this function after 1s. Also to hide an element use .style.visibility = "hidden"
var counter = 0;
functionresetImage(){
document.getElementById("face").src = "https://upload.wikimedia.org/wikipedia/commons/f/fa/718smiley.png";
if(counter ===3)
document.getElementById('face').style.visibility = "hidden";
}
functionmyTimer() {
counter++;
if (counter === 3 )
{//Image should be hidden in 1 secounddocument.getElementById("face").src = "https://i.pinimg.com/originals/e0/9b/0b/e09b0b3e287e7ed9c5b2a802e4e31f92.png ";
}else{
document.getElementById("face").src = "http://i0.kym-cdn.com/photos/images/newsfeed/000/295/544/a63.png";
}
setTimeout(function(){
resetImage();
}, 1000)
}
<imgsrc="https://upload.wikimedia.org/wikipedia/commons/f/fa/718smiley.png"id="face"onclick="setTimeout(myTimer, 1000);"style="width:100px;height:100px;"/>
Post a Comment for "Change Image Onclick For A Set Amount Of Time"