CODEWITHSUNDEEP
javascriptintervalscountdown
Aaron Matthews
Aaron Matthews

Reputation: 128

Basic Javascript Countdown

Good day fellow developers. Please entertain what must seem like a very simple question: I have a basic countdown with the intent of counting down to 5 and loops continually.

var countDownDiv = document.getElementById('countDown');
window.setInterval(intervalCountDown, 1000);
function intervalCountDown() {
  var counter = 5;
  countDownDiv.innerHTML = counter--;
}

The problem is that it's not counting down, for what reason I don't know. Here is a fiddle I've created if that helps.

Upvotes: 0

Views: 89

Answers (9)

vp_arth
vp_arth

Reputation: 14992

You redefine your counter every time countDown called.
To prevent this, you should define variable in outer scope.

var countDownDiv = document.getElementById('countDown');
window.setInterval(intervalCountDown, 1000);
var counter = 5;
function intervalCountDown() {
  countDownDiv.innerHTML = counter--;
}
<span id="countDown"></span>

You can also create something more reusable: 

    function countDown(from, time, el) {
      el.innerHTML = from;
      var i = setInterval(tick, time);
      function tick() {
        el.innerHTML = --from;
        if (from <= 0) clearInterval(i);
      }
    }

countDown(100, 1000, document.getElementById('c1'));
countDown(10, 5000, document.getElementById('c2'));
<span id="c1"></span><hr/>
<span id="c2"></span>

Upvotes: 2

frnt
frnt

Reputation: 8795

Try this,

var num = document.getElementById("countDown");//Get value from div.
var counter = 5; //Declaring counter value.
num.innerHTML = counter;//assigning counter value to num variable
function deg(){
counter--;//decrementing counter value.
num.innerHTML = counter;//getting output in div using innerHTML
if(counter <= 0){ //if couter value reaches or goes below 0 then stop     
// decrementing of counter value. 
window.clearInterval(st);
}
}
var st = window.setInterval(deg,1000);

Upvotes: 1

Pajar Fathurrahman
Pajar Fathurrahman

Reputation: 1021

// number randomizer
var bingoDiv = document.getElementById('bingo');
var counter = 5;
var counter_interval = false;
window.setInterval(intervalBingo, 5000);
function intervalBingo() {
  var newNum = Math.floor(Math.random() * 75) + 1;
  counter = 5;
  bingoDiv.innerHTML = newNum;
  clearInterval(counter_interval);
  countDownDiv.innerHTML = counter--;
  counter_interval = window.setInterval(intervalCountDown, 1000);
}
// basic countdown
var countDownDiv = document.getElementById('countDown');
function intervalCountDown() {
  countDownDiv.innerHTML = counter--;
}
<div id="bingo"></div>
<hr>
<div id="countDown"></div>

i thing like this, you can try this.

Upvotes: 1

HariKrishnan.P
HariKrishnan.P

Reputation: 1204

Your variable counter declared in Locally so again and again assign the same value counter = 5. That is the problem below display my correction 

var bingoDiv = document.getElementById('bingo');
window.setInterval(intervalBingo, 5000);

function intervalBingo() {
  var newNum = Math.floor(Math.random() * 75) + 1;
  bingoDiv.innerHTML = newNum;
}
// basic countdown
var countDownDiv = document.getElementById('countDown');
window.setInterval(intervalCountDown, 1000);
var counter = 5;
function intervalCountDown() {

    if (counter == 0) {
     counter =5;
   }
  countDownDiv.innerHTML = counter--;
}

Upvotes: 1

Jagdish Idhate
Jagdish Idhate

Reputation: 7742

You redefining counter variable with value 5. You can use closure as below

var countDownDiv = document.getElementById('countDown');
window.setInterval(intervalCountDown(), 1000);
function intervalCountDown() {
  var counter = 5;
  return function(){
    countDownDiv.innerHTML = counter--;
    if(counter==0) // Re-initiate counter
      counter = 5;
  }
}

Upvotes: 1

Attila Kling
Attila Kling

Reputation: 1787

You are redeclaring the counter variable in every turn. Fix: http://jsfiddle.net/4tpcdtdj/1/

var countDownDiv = document.getElementById('countDown');
var counter = 5;
var countInterval = setInterval(intervalCountDown, 1000);

function intervalCountDown() {
  if (counter <= -1) {
    clearInterval(countInterval);
    return;
  }

  countDownDiv.textContent = counter--;
}

Upvotes: 1

Emil S. J&#248;rgensen
Emil S. J&#248;rgensen

Reputation: 6366

You create a new counter variable each tick. Move counter out of the tick function:

var countDownDiv = document.getElementById('countDown');
var counter = 5;
window.setInterval(intervalCountDown, 1000);

function intervalCountDown() {
  countDownDiv.innerHTML = counter--;
}
<div id="countDown"></div>

Upvotes: 1

Krishnakumar_Muraleedharan
Krishnakumar_Muraleedharan

Reputation: 449

Initialize your counter outside the function.

var countDownDiv = document.getElementById('countDown');
window.setInterval(intervalCountDown, 1000);
var counter = 5;
function intervalCountDown() {

  countDownDiv.innerHTML = counter--;
}

Upvotes: 1

5eeker
5eeker

Reputation: 1027

Just put your var counter outside the function intervalCountDown()

var countDownDiv = document.getElementById('countDown');
window.setInterval(intervalCountDown, 1000);
  var counter = 5;
function intervalCountDown() {
  countDownDiv.innerHTML = counter--;
}

Upvotes: 1

Related Questions