使用javascript显示错误

使用javascript我想显示错误消息，消息将在2秒钟后隐藏/消失。错误会在2秒后完美显示并隐藏，但第二次不起作用。如果我重新加载我的页面，它会再次正常工作，等等

JavaScript

if(task_hour == "hour" || task_minute == "minute"){

        document.getElementById("error").innerHTML = "Add Time for the Task";
        setTimeout(function(){ document.getElementById("error").style.display="none"; }, 2000);

        return false;
    }

HTML

---

第二个错误出现在hiden div中

您必须创建一个范围，将其附加到带有错误文本的包装器中，并在2秒钟后销毁它：

function showError(message){
    var span = document.createElement('span');
    var errorWrap = document.getElementById("error");

    span.appendChild(document.createTextNode(message));
    errorWrap.appendChild(span);

    setTimeout(function(){ span.parentNode.removeChild(span); }, 2000);

    return false;
}

if(task_hour == "hour" || task_minute == "minute"){
    showError('Add Time for the Task');
}

---

您应该将div设置为最初隐藏的display:none，并使用display:block显示它：

JS:

HTML:

---

是什么事件触发了你的代码，比如一个按钮的点击，还是它与页面本身一起加载？你如何准确地显示它？您应该将display:设置为show，将display:none设置为hide。。。？它在函数中吗？或者这只是在加载页面时运行？当然不起作用。在第一个错误后，元素的样式为“无”，并且您从未将其重置为“块”以使其再次可见。您是否介意提供更详细的回答？如果我在1秒后添加1个错误和1个错误，会发生什么…？公平点。您可以获取现有setTimeout的句柄，并在创建新的setTimeout时取消它。我想您可能会使用一个全局变量来保存它，而不需要任何进一步的上下文。@KirillPisarev我已经编辑了我的答案以包含这种情况。@AndrewDunai首先它创建了一个全局变量，这是一个糟糕的做法，其次，您可能只显示一条消息。。。

function showError(message){
    var span = document.createElement('span');
    var errorWrap = document.getElementById("error");

    span.appendChild(document.createTextNode(message));
    errorWrap.appendChild(span);

    setTimeout(function(){ span.parentNode.removeChild(span); }, 2000);

    return false;
}

if(task_hour == "hour" || task_minute == "minute"){
    showError('Add Time for the Task');
}

var timer = null;

function showError(message) {
    if (timer !== null) {
        // Clear previous timeout:
        clearTimeout(timer);
        timer = null;
    }
    var errorElement = document.getElementById("error");
    errorElement.innerHTML = message;
    errorElement.style.display = 'block';
    timer = setTimeout(function(){ errorElement.style.display = 'none'; }, 2000);
}

showError('Error!');

<div id="errordiv" align="center" style="margin-left: auto; margin-right: auto;"> 
    <span id="error" style="color: red; display: none"></span> 
</div>