2015-01-15 2 views
2

Используя javascript, я хочу показать сообщение об ошибке, и сообщение скроется/исчезнет через 2 секунды. Ошибка отображается отлично и скрывается через 2 секунды, но она не работает во второй раз. если я перезагружу свою страницу, он отлично работает и так далее.Показать ошибку с помощью javascript

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

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

Что такое событие, запускающее ваш код (например, нажатие кнопки), или оно загружается самой страницей? – Jaay

+0

Как именно вы это показываете? Вы должны установить 'display: ', чтобы показать его и 'display: none', чтобы скрыть. –

+0

Как называется ваш javascript ...? это функция? или это просто работает при загрузке страницы? –

ответ

3

Вы должны установить DIV быть изначально скрытый (display: none) и использовать display: block, чтобы показать:

JS:

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!'); 

HTML:

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

что произойдет, если я добавлю 1 ошибку и еще 1 через 1 секунду ...? –

+0

Справедливая точка. Вы можете захватить дескриптор существующего setTimeout и отменить его, если будет создан новый. Я думаю, вы бы, вероятно, использовали глобальную переменную, чтобы держать ее, но без какого-либо дополнительного контекста. – Mic

+0

@KirillPisarev Я отредактировал свой ответ, чтобы включить эту ситуацию. –

0

появляется вторая ошибка в спрятана 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'); 
} 

see

+0

Не могли бы вы дать более информативный ответ? – user907860

Смежные вопросы