2015-01-15 3 views
2

자바 스크립트를 사용하고 오류 메시지를 표시하려고합니다. 메시지가 2 초 후에 숨겨 지거나 사라집니다. 오류가 완벽하게 표시되고 2 초 후 숨기기가되지만 두 번째로는 작동하지 않습니다. 만약 내가 내 페이지를 다시로드하면 완벽하게 다시 작동합니다.자바 스크립트를 사용하여 오류 표시

자바 스크립트

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에 나타납니다
<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

귀하의 자바 스크립트는 어떻게 호출되고 있습니까? 그것은 기능에 있습니까? 또는 이것은 페이지로드에서 실행 중입니까? –

답변

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

당신은 오류 텍스트와 함께 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

관련 문제