Update timer inside div. JavaScript

Question

I have written a timer. The initial minutes and hours are taken from the user. It should then count down the time. However, I don't know how to convert it to count down in a div. At the moment the action occurs in a prompt box. I don't want this.

function timer() {

    var mins = 1;
    var secs = 10;

    while (mins >= 0) {
        for(var i = secs; i > 0; i--) {
            setInterval(alert(mins + ":" + i),1000);
        }
        secs = 59;
        mins--;
    }
}

@Geeky - you have to actually prove it, post a fiddle of the code working etc. — adeneo
– adeneo, Commented Oct 18, 2016 at 23:07
the first code works, ya. I said that myself. But I need it to show the countdown automatically inside the html. Not in a prompt box. — Rumen Hristov
– Rumen Hristov, Commented Oct 18, 2016 at 23:10
What do you mean "no luck"? What is or isn't working? This question is really similar to your other question: How to repeatedly update the contents of a <div> by only using JavaScript?. — zero298
– zero298, Commented Oct 18, 2016 at 23:11

Community · Accepted Answer · 2017-05-23 10:27:31Z

2

Like I said in your other, similar question: don't make intervals or timeouts in loops.

You're introducing more complexity by adding the while. You don't need it.
Making intervals in loops usually isn't the right idea because you are likely spawning several intervals that will all do the same thing all at the same time.

var el = document.getElementById("timer"),
  mins = 2,
  secs = 0;

function countDown() {
  if (secs || mins) {
    setTimeout(countDown, 100); // Should be 1000, but I'm impatient
  }
  el.innerHTML = mins + ":" + (secs.toString().length < 2 ? "0" + secs : secs); // Pad number
  secs -= 1;
  if (secs < 0) {
    mins -= 1;
    secs = 59;
  }
}

countDown();

<div id="timer"></div>

edited May 23, 2017 at 10:27

CommunityBot

11 silver badge

answered Oct 18, 2016 at 23:25

zero298

27.1k10 gold badges80 silver badges109 bronze badges

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

3 Comments

Rumen Hristov Over a year ago

yes. This is exactly what I need. However, is there a simpler way to this without using recursion and preferebly simpler logic?

Rumen Hristov Over a year ago

This works here, but doesn't work in my html document. I put the script in the head section. If I declare all variables outside the function, they are not visible inside. If I put it inside, the div just blinks 2:10 in an instant and that's it.

Stephen P Over a year ago

1. Recursion is the right way to use a repeated setTimeout, only it isn't really recursion because the function is not calling itself, it's just scheduling a later call to it. The function does its business then calls setTimeout so it will be called again later. 2. If you put the script in the head section it is going to start executing before the DOM is built — the div id="timer" won't exist yet. You need to either put the script at the end (near the </body> tag) or wait for the DOMContentLoaded event before starting execution.

Aruna · Accepted Answer · 2016-10-18 23:28:40Z

1

Please check this by "Run code snippet" and confirm this is what you are trying,

var seconds = 60;

function timer() {

    document.getElementById('time').innerHTML = 'Seconds : ' + (seconds--).toString();

   if(seconds >= 0) {
      setTimeout(timer, 1000);
   }
}

timer();

<div id="time"></div>

answered Oct 18, 2016 at 23:28

Aruna

4481 gold badge3 silver badges12 bronze badges

Comments

Redu · Accepted Answer · 2016-10-19 00:07:34Z

0

I would do this as follows;

var insertZero = n => n < 10 ? "0"+n : ""+n,
     printTime = n => time.textContent = insertZero(~~(n/3600)%3600)+":"+insertZero(~~(n/60)%60)+":"+insertZero(n%60),
 countDownFrom = n => (printTime(n), setTimeout(_ => n ? sid = countDownFrom(--n)
                                                       : console.log("ignition:",n), 1000)),
           sid;
countDownFrom(3610);
setTimeout(_ => clearTimeout(sid),20005);

<div id="time"></div>

It stops in 20 seconds for the sake of the demo purposes.

edited Oct 19, 2016 at 0:07

answered Oct 18, 2016 at 23:57

Redu

26.3k6 gold badges61 silver badges84 bronze badges

Collectives™ on Stack Overflow

Update timer inside div. JavaScript

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related