Question

我有一个从按钮在click事件上执行的函数。点击它后，它显示我的消息＆＃34;发送电子邮件！＆＃34;代替形式。

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

要做你要求的事情，你只需要在用电子邮件替换它之前存储表单的内容，然后在超时时恢复它们。将表单的显示设置为none只会隐藏元素而不更改内容。

e.g。

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);
}

虽然这可以解决您的问题，但我建议将电子邮件信息放在单独的元素中，并根据需要隐藏/显示。如果您只是在五秒钟之后将它们放回去，那么替换表单内容并没有多大意义。

Answer 3

因为您设置的不显示表单按钮。

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>

更改HTML元素（div）的内容几秒

4 个答案: