如何在一段时间后自动隐藏消息"You have been subscribed to our newsletter "？

Question

消息"您已订阅我们的通讯";不是自动隐藏本身，我必须刷新页面，每次我需要在页面中输入一个新的条目，我也希望表单区域是空白的。见下图，我想隐藏订阅消息后的某个时候自己和电子邮件区域也应该是空白的，以获得一个新的条目。

<script type="text/javascript">
function doSubscribe() {
var subscriberEmail = document.getElementById("subscriberEmail").value;

var ajax = new XMLHttpRequest();
ajax.open("POST", "subscribe-newsletter.php", true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

ajax.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("subscribe-message").innerHTML = "You have been subscribed to our newsletter.";

}

};
ajax.send("subscriberEmail=" + subscriberEmail);
return false;
}

该怎么做才能使消息自动隐藏而不刷新页面，并且电子邮件区域也应该是空白的。

Answer 1

您需要在onreadystatechange函数中做一个小的更改:

现在

if (this.readyState == 4 && this.status == 200) {
document.getElementById("subscribe-message").innerHTML = "You have been subscribed to our newsletter.";
}

最是

if (this.readyState == 4 && this.status == 200) {
var element = document.getElementById("subscribe-message");
element.innerHTML = "You have been subscribed to our newsletter.";
setTimeout(() => {
element.innerHTML = "";
}, 3000) // Put your delay in milliseconds ex: 3 seconds is 3000 milliseconds
}

setTimeout()方法在指定毫秒数后调用函数或计算表达式。函数只执行一次。

Answer 2

你可以用setTimeout(这个例子有2.5秒的延迟)来处理这个问题，你可以把innerHTML设置为一个空字符串，或者隐藏，或者从DOM中移除，试试这个:

let elem = document.getElementById("subscribe-message");
function showMessage(){
elem.innerHTML = "You have been subscribed to our newsletter.";
setTimeout(() => {
elem.innerHTML = '';
//elem.style.display = 'none'; (hides)
//elem.remove(); (remove element from DOM)
}, 2500)
}
showMessage();

<p id="subscribe-message"></p>