Title: Javascript countdown timer with dom storage
Tags: javascript
Question: Can someone help me understand where im going wrong with this code ive spend days upon days trying to get this to work as i need a javascript/dom timer rather than jquery  

HTML  

```<input name="button" type="button" onClick="displaytimer()" value="Play!"&gt;
<form name="counter"&gt;
    You have 
    <input type="text" size="8" name="d2"&gt; 
    seconds left to escape!
</form&gt;
```

Javascript  

```if (localStorage) {
    var milisec = 0;
    var seconds = localStorage.seconds || 30;
    document.counter.d2.value = seconds;

    function displaytimer() {
        if (milisec <= 0) {
            milisec = 9;
            seconds -= 1;
        }

        if (seconds <= -1) {
            milisec = 0;
            seconds += 1;
        }

        else milisec -= 1;

        localStorage.seconds = seconds;
        document.counter.d2.value = seconds + "." + milisec;

        if (seconds &gt; 0 || (seconds = 0 &amp;&amp; milisec &gt; 0)) {
            setTimeout(displaytimer(), 100);
        }

        if (seconds <=0) {
            window.location="./pages/fail.html";
            cleartimer();
        }

        function cleartimer() {
            localStorage.seconds = seconds;
            document.counter.d2.value =0;
        }

        window.location="./pages/2.html";
    }
}
else {
    document.write("dom storage not supported");
}
```

Comment: Well what is it not doing that it should, or doing that it shouldnt? What is document.counter and d2? Are you getting errors on your javascript console?

Comment: @Ejay - If only there were some way to help him out with that . . .

Comment: @user3905055 - I did help . . . I fixed your formatting for you, rather than just commenting on it . . .

Comment: From first look, your formatting looks wrong

Comment: @user3905055 your `input` would not show until you put it in code format

Comment: Since you've ignored patrick's comment, do you get any errors **in console**? also what is `document.counter.d2`? Is there a portion of code that you've left out?

Comment: what do you think is preventing `window.location="./pages/2.html";` from executing on first call of `displaytimer()`? Also, you intend to use function name instead of function call inside `setTimeout` (in this context), so that'll be `setTimeout(displaytimer, 100);` instead of `setTimeout(displaytimer(), 100);`. Also you can't rely on `setTimeout` to execute after real 100ms.

Comment: so you do `setTimeout(displaytimer, 100)` and figure out a condition/event you want to redirect the user on, put `window.location="./pages/2.html";` inside that condition (`if`, because redirection to `pages/2.html` occurs instantaneously), and report back ;)

Comment: @Ejay, The formatting is weird, but I think it's valid.

Comment: basically i need a javascript only timer that doesnt refresh or reload on page F5 or close, and then when timers up redirect .. p.s i know in this ive used dom to store rather than javascript

Comment: @PatrickEvans the page doesnt work atm but i carnt find out why

Comment: @talemyn please dont comment if your not trying to help!

Comment: ah i see now, great thanks still not working though =p

Comment: apart from the format can anyone help me on this problem im having?

Comment: @PatrickEvans mybad ive updated the code to show you what you requested

Comment: @ejay thanks for continuing to help ive updated the missing code


Here is another answer: Try this code. It was modified to avoid some function declaration inside another function. Also, ```setInterval()``` was used for simplicity. Note that ```onClick()``` triggers now ```starttimer()```.

HTML:

```<input name="button" type="button" onClick="starttimer()" value="Play!"&gt;
<form name="counter"&gt;
    You have 
    <input type="text" size="8" name="d2"&gt; 
    seconds left to escape!
</form&gt;
```

JS:

```if (localStorage) {
    var milisec = 0;
    var seconds = localStorage.seconds || 30;
    document.counter.d2.value = seconds;
    var timer;

    function starttimer() {
        clearInterval(timer);
        timer = setInterval(displaytimer, 100);
    }

    function cleartimer() {
        localStorage.seconds = seconds;
        document.counter.d2.value = 0;
        clearInterval(timer);
    }

    function displaytimer() {
        if (milisec <= 0) {
            milisec = 9;
            seconds -= 1;
        }
        if (seconds <= -1) {
            milisec = 0;
        } else {
            milisec -= 1;
        }
        localStorage.seconds = seconds;
        document.counter.d2.value = seconds + "." + milisec;
        if (seconds < 0) { //countdown ended here
            //window.location="./pages/fail.html"; //put this forward in its appropriate place according to what you want to do
            cleartimer();
        }
        //window.location="./pages/2.html"; //put this forward in its appropriate place according to what you want to do
    }
}
else {
    document.write("dom storage not supported");
}
```



I've tested in this plunkr and it worked ok. 
http://plnkr.co/edit/acAxRZAHsFVtJoQZ1Ov6


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 16, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2015:00:05/06/15', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript>', 'Title': 'Javascript countdown timer with dom storage', 'ViewCount': 624, 'id': 30086309, 'user_AboutMe': None, 'user_AccountId': 4839656.0, 'user_DisplayName': 'user3905055', 'user_Reputation': 29.0, 'user_Views': 2.0, 'user_id': 3905055.0}}