My JavaScript countdown timer is not properly functioning

Question

My JavaScript timer is working bizarrely: it goes 3-2 and then abruptly it finishes (without going through step 1 and 0). Here is the code:

var count = 3;
function countDown() {
  document.getElementById("count").innerHTML = count;
  if (count > 0) {
    count--
  }
  else {
    clearInterval(ncount);
    document.getElementById("count").style.display = "none"
  }
  var ncount = setInterval("countDown()", 1000);
}

<form id="askName">
  <label> Enter your username: </label>
  <input id="input" type="text" required maxlength="10">
  <button type="button" onclick="countDown()"> Submit </button>
</form>
<h2 id="count"> </h2>

Why does this occur?

Maybe setInterval("countDown()", 1000) should be setInterval(countDown, 1000)? — iAmOren
– iAmOren, Commented Jul 30, 2020 at 15:22

Unmitigated · Accepted Answer · 2020-07-30 15:21:52Z

2

The issue is that your setInterval is calling your function that spawns another setInterval, which causes the count to be decremented faster. You can use a inner function to avoid this issue.

var count = 3;
function countDown() {
   function helper(){
    document.getElementById("count").innerHTML = count;
    if (count > 0) {
      count--;
    }  else {
      clearInterval(ncount);
      document.getElementById("count").style.display = "none"
    }
  }
  var ncount = setInterval(helper, 1000);
}

<form id="askName">
  <label> Enter your username: </label>
  <input id="input" type="text" required maxlength="10">
  <button type="button" onclick="countDown()"> Submit </button>
</form>
<h2 id="count"> </h2>

answered Jul 30, 2020 at 15:21

Unmitigated

91.5k12 gold badges103 silver badges109 bronze badges

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

Comments

Jakub Kriz · Accepted Answer · 2020-07-30 16:20:58Z

0

This Should work fine. I tried Changing the setInterval Time

var count = 3;
    function countDown() {
        function helper() {
            document.getElementById("count").innerHTML = count;
            if (count > 0) {
                count--;
             } else {
                clearInterval(ncount);
                document.getElementById("count").style.display = "none";
        }
      }
      var ncount = setInterval(helper, 1020);
    }

<form id="askName">
  <label> Enter your username: </label>
  <input id="input" type="text" required maxlength="10">
  <button type="button" onclick="countDown()"> Submit </button>
</form>
<h2 id="count"> </h2>

edited Jul 30, 2020 at 16:20

Jakub Kriz

1,5292 gold badges21 silver badges29 bronze badges

answered Jul 30, 2020 at 15:57

Tibin Sunny

165 bronze badges

Collectives™ on Stack Overflow

My JavaScript countdown timer is not properly functioning

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related