設定した時間だけonClick画像を変更する

Question

私は3つの画像を切り替える。

ゴール：まず、幸せな顔のイメージを示したいと思います。ユーザが幸せな顔画像をクリックすると、それを1秒間悲しい顔画像に変更したい。 1秒後、ユーザーが幸せな顔を3回クリックするまで、それを幸せな顔に戻したいと思います。 3回目のクリックで、1秒間表示される別の画像に変更してから、画像全体が消えてしまいます。

どうすればいいですか？

var counter = 0; 
 
function myTimer() { 
 
    counter++; 
 
    document.getElementById("face").src = "http://i0.kym-cdn.com/photos/images/newsfeed/000/295/544/a63.png"; 
 
    
 
    if (counter === 3) {//Image should be hidden in 1 secound 
 
    document.getElementById("face").src = "https://i.pinimg.com/originals/e0/9b/0b/e09b0b3e287e7ed9c5b2a802e4e31f92.png "; 
 
    document.getElementById('face').visable = 'hidden' 
 
    } 
 
}

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

Answer 1

あなたは、setTimeout()を使用した画像srcをリセットする機能を作成し、1秒後に、この関数を呼び出すためにタイムアウトを使用することができます。また.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 
 
\t 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;"/>

を使用する要素を非表示にします