Show error using javascript

Question

Using javascript i want to show error message, and the message will hide/disappear after 2 second . The error show perfectly and hide after 2 second but it does not work for the second time. if i reload my page it work perfectly again and so on.

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>

What is the event triggering your code (like a button click) or is it loaded with the page itself? — Jaay
– Jaay, Commented Jan 15, 2015 at 14:39
How exactly do you show it? You should set display: <smth> to show it and display: none to hide. — Andrew Dunai
– Andrew Dunai, Commented Jan 15, 2015 at 14:40
How is your javascript being called...? is it in a function? or is this just running on page load? — Charlie G
– Charlie G, Commented Jan 15, 2015 at 14:40
Of course it won't work. After the first error, the element's style is none, and you never reset it to block to make it visible again. — Marc B
– Marc B, Commented Jan 15, 2015 at 14:43

Andrew Dunai · Accepted Answer · 2015-01-15 14:51:13Z

5

You should set the div to be initially hidden (display: none) and use display: block to show it:

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>

edited Jan 15, 2015 at 14:51

answered Jan 15, 2015 at 14:42

Andrew Dunai

3,11921 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kirill Pisarev Over a year ago

what will happen if i add 1 error and 1 more after 1 second...?

Mic Over a year ago

Fair point. You could grab the handle for the existing setTimeout and cancel it if a new one is created. I think you'd probably use a global variable to hold it though, without any further context.

Andrew Dunai Over a year ago

@KirillPisarev I've edited my answer to include this situation.

Kirill Pisarev Over a year ago

@AndrewDunai first it creates global variable that is bad practise, second, you may show only 1 message... see

Kirill Pisarev · Accepted Answer · 2015-01-15 14:52:53Z

0

The second error appears in hiden div

you have to create a span, append it to wrapper with error text and after 2 seconds destroy it:

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

edited Jan 15, 2015 at 14:52

answered Jan 15, 2015 at 14:40

Kirill Pisarev

8434 silver badges11 bronze badges

1 Comment

d.k Over a year ago

would you mind to provide a bit more informative answer?

Collectives™ on Stack Overflow

Show error using javascript

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related