HTML要素（div）のコンテンツを数秒間変更します

Question

ボタンからclickイベントで実行する機能を持っています。それをクリックすると、私のメッセージ "Email was send！"が表示されます。フォームの代わりに。

5秒後、このメッセージは表示されなくなり、何も残っていません。 5秒後に元のコンテンツをdivに戻すにはどうすればよいですか？以下は私のスニペットです。

function myFunction() { 
    document.getElementById("form").innerHTML = "Email was send!"; 
    setTimeout(function() { 
     document.getElementById('form').style.display = 'none'; 
    }, 5000); 
} 

メッセージを5秒間表示してから元のフォームのコンテンツに戻したいとします。

Answer 1

innerHTMLを変数に保存してから、後で設定することができます。ここに私の意味は次のとおりです：

function myFunction() { 
    var form = document.getElementById("form") 
    var originalContent = form.innerHTML 
    form.innerHTML = "Email was sent" 
    setTimeout(function() { 
    form.innerHTML = originalContent 
    }, 5000) 
} 

表示をnoneに設定する必要はありません。これは、フォームを完全に隠すことになります。

Answer 2

フォームボタンを表示しないためです。

Answer 3

あなたが求めていることをするには、電子メールメッセージに置き換える前にフォームの内容を保存してから、タイムアウトに戻すだけです。フォームの表示をnoneに設定すると、内容を変更せずに要素が非表示になります。

function myFunction() { 
    var old_html = document.getElementById("form").innerHTML; 
    document.getElementById("form").innerHTML = "Email was send!"; 
    setTimeout(function(){ 
     document.getElementById('form').innerHTML = old_html; 
    }, 5000); 
} 

---

これはあなたの問題を解決する必要がありますが、私は別の要素に電子メールメッセージを入れ、必要に応じて表示/非表示に推薦します。 5秒後にフォームの内容を置き換えるのであれば、フォームの内容を置き換えるのは実際には意味がありません。

Answer 4

<script> 
function myFunction() { 
     var originalContent = document.getElementById("form").innerHTML; 
     document.getElementById("form").innerHTML = "Email was send!"; 
     setTimeout(function() { 
        document.getElementById('form').innerHTML = originalContent; 
       }, 5000); 
    } 
</script>