NaN instead of numbers - javascript

Question

I'm making a webpage that shows the current time, and a countdown to a hardcoded time. the current time works perfect, but the countdown shows NaN instead of the numbers... there are no console errors. this is my code:

<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
    var now = new Date();
    var deadline = new Date();
    var countdown = new Date("12:10:00");
    // deadline setten moet via gui kunnen____________________________
    // deadline.setHours(11);
    // deadline.setMinutes(10);
    // deadline.setSeconds(0);
    //________________________________________________________________
    var clockH = now.getHours();
    var clockM = now.getMinutes();
    var clockS = now.getSeconds();

    // var countdownH = getCountdown(deadline).hours;
    // var countdownM = getCountdown(deadline).minutes;
    // var countdownS = getCountdown(deadline).seconds;

    //m = checkTime(m);
    //s = checkTime(s);

    startClock('clock');
    startCountdown('countdown', deadline);

    var t = setTimeout(startTime, 500);
}

function getCountdown(deadline){
    var countdownTotal = Date.parse(deadline) - Date.parse(new Date());
    var countdownS = Math.floor( (countdown/1000) % 60 );
    var countdownM = Math.floor( (countdown/1000/60) % 60 );
    var countdownH = Math.floor( (countdown/(1000*60*60)) % 24 );
    return{
      'countdownTotal': countdownTotal,
      'countdownH': countdownH,
      'countdownM': countdownM,
      'countdownS': countdownS
    }
}

function startClock(id){
  var clock = document.getElementById(id);
  var timeInterval = setInterval(function(){
    var now = new Date();
    var nowH = now.getHours();
    var nowM = now.getMinutes();
    var nowS = now.getSeconds();
    clock.innerHTML =  'hours: '+ nowH + ' minutes: ' + nowM + ' seconds: ' + nowS;
  }, 1000);
}

function startCountdown(id, deadline){
  var countdown = document.getElementById(id);
  var timeInterval = setInterval(function(){
    var t = getCountdown(deadline);
    countdown.innerHTML = 'hours: '+ t.countdownH + ' minutes: ' + t.countdownM + ' seconds: ' + t.countdownS;
    if(t.countdownTotal <= 0){
      clearInterval(timeInterval);
    }
  }, 1000);
}


function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}
</script>
</head>

<body onload="startTime()">

<div id="clock"> </div><br>
<div id="countdown"> </div>
</body>
</html>

`new Date("12:10:00");` is invalid as your argument is not a date. — str, Nov 03 '16 at 12:07
when you initialize `new Date()` you should include the date — Beginner, Nov 03 '16 at 12:12
create a date: http://stackoverflow.com/questions/8224459/how-to-create-a-date-object-from-string-in-javascript — Tobi, Nov 03 '16 at 12:12

Nitheesh · Answer 1 · 2016-11-03T12:36:18.947

This will be what you require I think.

<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
    var now = new Date();
    var deadline = new Date();
    var countdown = new Date("November 03, 2016 20:00:00");
    // deadline setten moet via gui kunnen____________________________
    // deadline.setHours(11);
    // deadline.setMinutes(10);
    // deadline.setSeconds(0);
    //________________________________________________________________
    var clockH = now.getHours();
    var clockM = now.getMinutes();
    var clockS = now.getSeconds();

    // var countdownH = getCountdown(deadline).hours;
    // var countdownM = getCountdown(deadline).minutes;
    // var countdownS = getCountdown(deadline).seconds;

    //m = checkTime(m);
    //s = checkTime(s);

    startClock('clock');
    startCountdown('countdown', countdown);

    var t = setTimeout(startTime, 500);
}

function getCountdown(deadline){
    var countdownTotal = Date.parse(deadline) - Date.parse(new Date());
    var countdownS = Math.floor( (countdownTotal/1000) % 60 );
    var countdownM = Math.floor( (countdownTotal/1000/60) % 60 );
    var countdownH = Math.floor( (countdownTotal/(1000*60*60)) % 24 );
    return{
      'countdownTotal': countdownTotal,
      'countdownH': countdownH,
      'countdownM': countdownM,
      'countdownS': countdownS
    }
}

function startClock(id){
  var clock = document.getElementById(id);
  var timeInterval = setInterval(function(){
    var now = new Date();
    var nowH = now.getHours();
    var nowM = now.getMinutes();
    var nowS = now.getSeconds();
    clock.innerHTML =  'hours: '+ nowH + ' minutes: ' + nowM + ' seconds: ' + nowS;
  }, 1000);
}

function startCountdown(id, deadline){
  var countdown = document.getElementById(id);
  var timeInterval = setInterval(function(){
    var t = getCountdown(deadline);
    countdown.innerHTML = 'hours: '+ t.countdownH + ' minutes: ' + t.countdownM + ' seconds: ' + t.countdownS;
    if(t.countdownTotal <= 0){
      clearInterval(timeInterval);
    }
  }, 1000);
}


function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}
</script>
</head>

<body onload="startTime()">

<div id="clock"> </div><br>
<div id="countdown"> </div>
</body>
</html>

Currently this will display only 1s difference. Because you are comparing the new Date with a milli second delayed new Date. your deadline variable needs to be the required time. Currently you have set that to new Date. Please change that according to your requirement — Nitheesh, Nov 03 '16 at 12:25
solved, with a little extra help from a comment below! thanks! — pieter-jan goeman, Nov 03 '16 at 12:34
I have modified the code a little bit. Now this will show the time difference till today 8PM. the time is hard coded now — Nitheesh, Nov 03 '16 at 12:37

score 0 · Answer 2 · answered Nov 03 '16 at 12:09

0

You actual problem is, that your countdown variable is invalid:

var countdown = new Date("12:10:00")
//Invalid Date

countdown / 10
//NaN

answered Nov 03 '16 at 12:09

Tobi

525
4
7

score 0 · Answer 3 · answered Nov 03 '16 at 12:19

3 issues :

var countdown = new Date("12:10:00"); is not valide date format.
countdown should be use instead of deadline in startCountdown argument.
countdownTotal should be use instead of countdown in getCountdown method.

<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
    var now = new Date();
    var deadline = new Date();
    // year, month, day, hours, minutes, seconds, milliseconds
    var countdown = new Date(2016, 11, 3, 18, 00);
    //console.log(countdown);
    // deadline setten moet via gui kunnen____________________________
    // deadline.setHours(11);
    // deadline.setMinutes(10);
    // deadline.setSeconds(0);
    //________________________________________________________________
    var clockH = now.getHours();
    var clockM = now.getMinutes();
    var clockS = now.getSeconds();

    // var countdownH = getCountdown(deadline).hours;
    // var countdownM = getCountdown(deadline).minutes;
    // var countdownS = getCountdown(deadline).seconds;

    //m = checkTime(m);
    //s = checkTime(s);

    startClock('clock');
    startCountdown('countdown', countdown);

    var t = setTimeout(startTime, 500);
}

function getCountdown(deadline){
  //console.log(Date.parse(deadline));
  //console.log(Date.parse(new Date()));
    var countdownTotal = Date.parse(deadline) - Date.parse(new Date());
    var countdownS = Math.floor( (countdownTotal/1000) % 60 );
    var countdownM = Math.floor( (countdownTotal/1000/60) % 60 );
    var countdownH = Math.floor( (countdownTotal/(1000*60*60)) % 24 );
    return{
      'countdownTotal': countdownTotal,
      'countdownH': countdownH,
      'countdownM': countdownM,
      'countdownS': countdownS
    }
}

function startClock(id){
  var clock = document.getElementById(id);
  var timeInterval = setInterval(function(){
    var now = new Date();
    var nowH = now.getHours();
    var nowM = now.getMinutes();
    var nowS = now.getSeconds();
    clock.innerHTML =  'hours: '+ nowH + ' minutes: ' + nowM + ' seconds: ' + nowS;
  }, 1000);
}

function startCountdown(id, deadline){
  var countdown = document.getElementById(id);
  var timeInterval = setInterval(function(){
    var t = getCountdown(deadline);
    //console.log(t);
    countdown.innerHTML = 'hours: '+ t.countdownH + ' minutes: ' + t.countdownM + ' seconds: ' + t.countdownS;
    if(t.countdownTotal <= 0){
      clearInterval(timeInterval);
    }
  }, 1000);
}


function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}
</script>
</head>

<body onload="startTime()">

<div id="clock"> </div><br>
<div id="countdown"> </div>
</body>
</html>

Hello, thanks for this reply, it's exactly everything what was wrong! now it works, thanks! — pieter-jan goeman, Nov 03 '16 at 12:32

score 0 · Answer 4 · answered Nov 03 '16 at 12:20

You should use the commented out part for your startTime

function startTime() {
    var now = new Date();
    var deadline = new Date();
    //var countdown = new Date("12:10:00");
    // deadline setten moet via gui kunnen____________________________
     deadline.setHours(19);
     deadline.setMinutes(10);
     deadline.setSeconds(0);
    //________________________________________________________________
    //var clockH = now.getHours();
    //var clockM = now.getMinutes();
    //var clockS = now.getSeconds();

    // var countdownH = getCountdown(deadline).hours;
    // var countdownM = getCountdown(deadline).minutes;
    // var countdownS = getCountdown(deadline).seconds;

    //m = checkTime(m);
    //s = checkTime(s);

    startClock('clock');
    startCountdown('countdown', deadline);

    var t = setTimeout(startTime, 500);
}

And in the getCountdown method you should use the correct variable name

function getCountdown(deadline){
    var countdownTotal = Date.parse(deadline) - Date.parse(new Date());
    var countdownS = Math.floor( (countdownTotal/1000) % 60 );
    var countdownM = Math.floor( (countdownTotal/1000/60) % 60 );
    var countdownH = Math.floor( (countdownTotal/(1000*60*60)) % 24 );
    return{
      'countdownTotal': countdownTotal,
      'countdownH': countdownH,
      'countdownM': countdownM,
      'countdownS': countdownS
    }
}

<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
    var now = new Date();
    var deadline = new Date();
    //var countdown = new Date("12:10:00");
    // deadline setten moet via gui kunnen____________________________
     deadline.setHours(19);
     deadline.setMinutes(10);
     deadline.setSeconds(0);
    //________________________________________________________________
    //var clockH = now.getHours();
    //var clockM = now.getMinutes();
    //var clockS = now.getSeconds();

    // var countdownH = getCountdown(deadline).hours;
    // var countdownM = getCountdown(deadline).minutes;
    // var countdownS = getCountdown(deadline).seconds;

    //m = checkTime(m);
    //s = checkTime(s);

    startClock('clock');
    startCountdown('countdown', deadline);

    var t = setTimeout(startTime, 500);
}

function getCountdown(deadline){
    var countdownTotal = Date.parse(deadline) - Date.parse(new Date());
    var countdownS = Math.floor( (countdownTotal/1000) % 60 );
    var countdownM = Math.floor( (countdownTotal/1000/60) % 60 );
    var countdownH = Math.floor( (countdownTotal/(1000*60*60)) % 24 );
    return{
      'countdownTotal': countdownTotal,
      'countdownH': countdownH,
      'countdownM': countdownM,
      'countdownS': countdownS
    }
}

function startClock(id){
  var clock = document.getElementById(id);
  var timeInterval = setInterval(function(){
    var now = new Date();
    var nowH = now.getHours();
    var nowM = now.getMinutes();
    var nowS = now.getSeconds();
    clock.innerHTML =  'hours: '+ nowH + ' minutes: ' + nowM + ' seconds: ' + nowS;
  }, 1000);
}

function startCountdown(id, deadline){
  var countdown = document.getElementById(id);
  var timeInterval = setInterval(function(){
    var t = getCountdown(deadline);
    countdown.innerHTML = 'hours: '+ t.countdownH + ' minutes: ' + t.countdownM + ' seconds: ' + t.countdownS;
    if(t.countdownTotal <= 0){
      clearInterval(timeInterval);
    }
  }, 1000);
}


function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}
</script>
</head>

<body onload="startTime()">

<div id="clock"> </div><br>
<div id="countdown"> </div>
</body>
</html>

NaN instead of numbers - javascript

4 Answers4