Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by troy beckett
troy beckett
12,035 Points

What's wrong with this countdown timer?

I can't work out why it won't count down when I click start.

<body> <input type="text" id="txtbox" value="10"> <button id="starter">Start</button> <button id="stopper">Stop</button> <script> var intervalIDD; 

        function startTimer(){
         var control = document.getElementById("txtbox");

            var seconds = control.value;

         seconds = seconds - 1;

            if(seconds == 0){
                control.value = "Done";
                return;
            }
            else{
                control.value = seconds;   
            }

            intervalIDD = setTimeout(startTimer,1000);
        }

        function stopTimer(){
            clearTimeout(intervalIDD);
        }
                  document.getElementById("starter").addEventListener("click",startTimer);
               document.getElementById("stopper").addEventListener("click",stopTimer);

    </script>
</body>

</html>

3 Answers

Rich Donnellan
MOD
Rich Donnellan
Treehouse Moderator 27,741 Points
Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,741 Points

Troy,

How are you executing this? Copy/pasting your code directly into jsbin.com yields the results you are after (albeit one warning).

I took the liberty to modify your code a bit to include a reset button and a starting value that sets the value attribute on your input. Let me know what you think or ideas for improvement!

-Rich

<body>
<input type="text" id="txtbox" value="">
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="reset">Reset</button>
</body>

var control = document.getElementById("txtbox");
var resetValue = "5";
var setControlVal = control.setAttribute("value", resetValue);
var seconds = control.value;
var interval;

function startTimer() {
   if (seconds === 0 || seconds === "Done") {
    control.value = "Done";
    return;
  } else {
      control.value = seconds--;   
  }
  interval = setTimeout(startTimer, 1000);
}

function stopTimer() {
  clearTimeout(interval);
}

function resetTimer() {
  stopTimer();
  control.value = resetValue;
  seconds = resetValue;
}

document.getElementById("start").addEventListener("click", startTimer);
document.getElementById("stop").addEventListener("click", stopTimer);
document.getElementById("reset").addEventListener("click", resetTimer);
troy beckett
troy beckett
12,035 Points
troy beckett
troy beckett
12,035 Points

Yeah it's a good modification. Could you explain why I need '===' and not '==' for it to work. thanks.

Merritt Lawrenson
Merritt Lawrenson
13,477 Points
Merritt Lawrenson
Merritt Lawrenson
13,477 Points

Troy,

=== is the strict equality operator. If you use == weird things can happen where it returns true even if not equal. For instance, "0 === false" evaluates to false, as it should - 0 and false are not equal. However, "0 == false" evaluates to true. Using strict equality with the === is best practice.