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;
function resetImage(){
     document.getElementById("face").src = "https://upload.wikimedia.org/wikipedia/commons/f/fa/718smiley.png";
     if(counter ===3)
       document.getElementById('face').style.visibility = "hidden";
}

function myTimer() {
counter++;      
  if (counter === 3 )
  {//Image should be hidden in 1 secound
	document.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)
 
}

<img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/718smiley.png" id="face" onclick="setTimeout(myTimer, 1000);" style="width:100px;height:100px;"/>