Why does this countdown clock code return an undefined string?

Question

I tried to create a really simple Javascript clock that would countdown to 0 from a time that the user specifies, but for some reason it keeps returning 'undefined' as a string. Here is the source of the clock:

function startTimer(duration) {
  desap = duration - (new Date).getTime() / 1000;
  var timer = desap,
    minutes, seconds;
  setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    display = "Ends in " + minutes + " mins and " + seconds + " secs";

    if (--timer < 0) {
      display = "Ended";
    }
    return display;
  }, 1000);
}

document.write(startTimer(999999999999999))

JSFiddle

Your function `startTimer` doesn't return anything. – XCS Jul 27 '16 at 08:19 — XCS, Jul 27 '16 at 08:19

score 1 · Accepted Answer · answered Jul 27 '16 at 08:26

1

Ideally, I would lean toward using the .textContent javascript property, rather than document.write:

var displayTimer = document.getElementsByClassName('display-timer')[0];

function startTimer(duration) {

  setInterval(function() {
    var timer = duration - (new Date).getTime() / 1000;
    var minutes = parseInt(timer / 60, 10)
    var seconds = parseInt(timer % 60, 10);
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    var display = "Ends in " + minutes + " mins and " + seconds + " secs";

    if (--timer < 0) {
      display = "Ended";
    }

    displayTimer.textContent = display;

  }, 1000);
}

window.addEventListener('load',function(){startTimer(999999999999999);},false);

<div class="display-timer">
</div>

answered Jul 27 '16 at 08:26

Rounin

27,134
9
83
108

1

This is an even better solution of what I thought about, but even though it's working on the snippet, my localhost will continue to say "undefined is not an object (evaluating 'displayTimer.textContent = display')". Why does that happen? – Franco Roura Jul 27 '16 at 09:10
Have you compared what you have locally to the snippet above, line by line? – Rounin Jul 27 '16 at 09:47
Yes, it is exactly the same, I think it is because I'm calling the function inside the callback function of a Google maps API. – Franco Roura Jul 27 '16 at 09:51

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

It does not return undefined as string. It just returns undefined and that is because there is no return statement in your code.

The return statement is inside callback of setInterval

Sample code

function startTimer(duration) {
  desap = duration - (new Date).getTime() / 1000;
  var timer = desap,
    minutes, seconds;
  setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    display = "Ends in " + minutes + " mins and " + seconds + " secs";

    if (--timer < 0) {
      display = "Ended";
    }
    return display;
  }, 1000);
}

var a = startTimer(999999999999999);
document.write("Value of a is: ", a, " and type is: ", typeof(a))

If you wish to get timer, you can try something like this:

function startTimer(duration) {
  desap = duration - (new Date).getTime() / 1000;
  var timer = desap,
    minutes, seconds;
  setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    display = "Ends in " + minutes + " mins and " + seconds + " secs";

    if (--timer < 0) {
      display = "Ended";
    }
    return display;
  }, 1000);
}

var a = startTimer(999999999999999);
document.write("Value of a is: ", a, " and type is: ", typeof(a))

And if you wish to show timer on UI, you should use callbacks:

function startTimer(duration, callback) {
  desap = duration - (new Date).getTime() / 1000;
  var timer = desap,
    minutes, seconds;
  setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    display = "Ends in " + minutes + " mins and " + seconds + " secs";

    if (--timer < 0) {
      display = "Ended";
    }
    if(callback) callback(display);
  }, 1000);
}

var a = startTimer(999999999999999, notify);
function notify(str){
  document.getElementById("timerContent").innerHTML = str;
}

<div id="timerContent"></div>

Reference

type of undefined is undefined. @Fraaaan I have updated my answer. Hope it helps now. — Rajesh, Jul 27 '16 at 08:11

score 0 · Answer 3 · answered Jul 27 '16 at 08:17

Why not just put the document.write inside the interval?

function startTimer(duration) {
  var desap = duration - (new Date().getTime()) / 1000;

  var timer = desap;

  var minutes = 0;
  var seconds = 0;
  var display = "";

  setInterval(function () {
    minutes = parseInt(timer / 60, 10)      
    seconds = parseInt(timer % 60, 10);
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display = "Ends in " + minutes + " mins and " + seconds + " secs <br/>";
    if (--timer < 0)
      display = "Ended";

    document.write(display);
  }, 1000);  
}

startTimer(999999999999999);

Mohamed Salem Lamiri · Answer 4 · 2016-07-27T08:26:04.617

Try this code snippet, I disabled document.write because JSFiddle disallow the use of this function, instead I used console.log to display the output. You can change that later.

Edit : You are getting an undefined error because you are using an anonymous function and outside "setInterval" you don't have any return for your main function "startTimer"

 function startTimer(duration) {
  desap = duration - (new Date).getTime() / 1000;
  var timer = desap, minutes, seconds;
    
setInterval(function () {
   minutes = parseInt(timer / 60, 10)
   seconds = parseInt(timer % 60, 10);
   minutes = minutes < 10 ? "0" + minutes : minutes;
   seconds = seconds < 10 ? "0" + seconds : seconds;
   display = "Ends in " + minutes + " mins and " + seconds + " secs";
   
   if (--timer < 0) {
    display = "Ended";
  }
    //document.write(display);
console.log(display);
  return display;
  }, 1000);

 }

startTimer(999999999999999);

score 0 · Answer 5 · answered Jul 27 '16 at 09:09

In OP code document.write(startTimer(999999999999999)) , you haven't return any variable so it will undefined ,even if you return it will get only one times because startTimer is only one time runs.setInterval has inside function so write document.write inside setInterval function of startTime will be valid .

<div id="timing"></div>
<script type="text/javascript">
 var show = document.getElementById("timing");
    function startTimer(duration) {
        desap = duration -  1000;
        var timer = desap;
        clock = setInterval(function() {    
                var minutes, seconds,display;
                 minutes = parseInt(timer / 60, 10);
                seconds = parseInt(timer % 60, 10);
                minutes = minutes < 10 ? "0" + minutes : minutes;
                seconds = seconds < 10 ? "0" + seconds : seconds;
                display = "Ends in " + minutes + " mins and " + seconds + " secs";
                if (--timer < 0) {
                  clearInterval(clock);
                  display = "Ended";
                }
                else{
                show.innerHTML = display;    
               }   
              },1000);     
}

startTimer(999999999999999);
</script>

Why does this countdown clock code return an undefined string?

5 Answers5

Sample code

Reference