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

我有一个功能可以在一个按钮上执行click事件。点击后，它显示我的消息“电子邮件已发送！”代替形式。更改HTML元素（div）的内容几秒钟

5秒钟后，此消息消失并且没有任何剩余。如何在5秒后将原始内容重新设置为div？以下是我的片段。

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

我想显示我的消息5秒钟，然后回到原始表单内容。

来源

2016-07-15 Adrian

你应该留在你的表格上。只需在页面上添加成功消息，并在5秒后消失。 – CoderBoy

您应该将成功消息放在单独的元素中，并隐藏一个并显示另一个元素，而不是暂时替换该表单。 –

您是否尝试在分配新值之前存储您的innerHTML？然后毕竟你可以用这个存储的值再次设置innerHTML，而不是设置display none。 – Berkay92

您可以先将innerHTML保存到变量中，然后再将其设置回去。这就是我的意思：

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

没有必要将显示设置为无，这将完全隐藏窗体。

来源

2016-07-15 10:28:18 Lew

再试一次，我错过了在超时时间内的大写'F'。我纠正了这一点。 – Lew

你可以在你的新内容中添加一个范围，并添加一个如下所示的类：form.innerHTML =“电子邮件已发送” – Lew

嗯，这里没有代码发送电子邮件，如果你有一个单独的函数，你应该从这个函数中调用它。 – Lew

因为您正在设置不显示任何表单按钮。

来源

2016-07-15 10:27:08 Abhay

请详细说明或作为评论。 – Rohit416

要做你在问什么，你只需要存储表单的内容，然后用电子邮件替换它，然后在超时时恢复它们。将窗体的显示设置为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); 
}

虽然这应该解决您的问题，我建议把电子邮件在一个单独的元素，隐藏/显示是必要的。如果你只是在五秒钟后把它放回去，那么替换表单内容并没有什么意义。

来源

2016-07-15 10:32:17

<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>

来源

2016-07-15 10:35:34

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

回答

相关问题