如何在一段时间后自动隐藏“您已订阅我们的时事通讯”的消息？

Question

“您已订阅我们的时事通讯”消息本身不会自动隐藏，每次我需要在页面中输入新条目时我都必须刷新页面，并且我希望表单区域为空白。 在下图中，我想在一段时间后自行隐藏该订阅消息，并且 email 区域也应该为空白以获取新条目。

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

应该怎么做，消息自动隐藏而不刷新页面，email 区域也应该是空白的。

Answer 1

你需要在你的onreadystatechange function 中做一点小改动：

现在

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()方法调用 function 或在指定的毫秒数后计算表达式。 function 只执行一次。

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>