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

问题描述

“您已订阅我们的时事通讯”消息本身不会自动隐藏，每次我需要在页面中输入新条目时都必须刷​​新页面，并且我希望表单区域为空白。{{ 3}}

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

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

解决方法

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

,

你可以用 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>