My Javascript CountDown() is not working

Question

My Countdown is not working... its show just 10.. I am trying run countdown timer on a click, under H5 heading, it will replace Open by timer,Clear by Reserved and Transparent background by orange color. and when it comes to less than 1, it will change change back again to default. abc() is function for onClick...

function abc() {
  if (firstTimer = "Open") {

    firstHeading.innerHTML = "Reserved";
    firstT.style.backgroundColor = "#D27900";

    function countDown(secs, elem) {
      var element = document.getElementById(elem);
      element.innerHTML = secs;
      if (secs < 1) {
        clearTimeout(timer);
        element.innerHTML = "Open";
        firstHeading.innerHTML = "Clear";
      }
      secs--;
      var timer = setTimeout('countDown(' + secs + ',"' + elem + '")', 10000);
    }
    countDown(10, "firstTblImageTimer");
  }
}

You appear to be trying to using `timer` before it's declared. Also, why clear a `timeout`? They're "self clearing". — Carcigenicate, Oct 01 '17 at 14:39
https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons — mplungjan, Oct 01 '17 at 14:46
i was seeing a tutorial of Countdown timer. so he used ClearTimeout — Muhammad Ameem Khan, Oct 01 '17 at 14:48

Pablo Lammel · Answer 1 · 2017-10-01T17:04:44.720

I think you are a little confused about how setTimeout works, since you are setting timeout to your countdown function inside the countdown function itself, and you will have to wait 10 seconds for your countdown function to be executed each time. If you are willing to print a countdown, I would suggest you to use setInterval instead. Here is a boiler plate for your solution

var secs = 10;
var countdown = function() {
    
 if(secs < 1) {
  clearInterval(myVar);
                // Do something while still counting down
  console.log("Time out!");
 } else {
               // Do something when you reach to zero
  console.log(secs);
  secs--;
 }
}
var myVar = setInterval(countdown, 1000);

I recomend you to take a look at Window clearInterval() Method and Window setTimeout() Method W3School pages so you can understand how they work and the differences between each other and tell which method suites your problem better.

Sorry mate, I dont mean to be rude, but will have to google it yourself this time. — Pablo Lammel, Oct 01 '17 at 15:59

score 0 · Accepted Answer · answered Oct 01 '17 at 15:32

0

You use a wrong approach to solve this timer thing, you want the timer to update every second, therefore your timer should be called every second. To make things clear, try to make every function to have only One responsibility, for example to code below:

function countDown( secs , elem ) {
    var updateElem =  function(){
        if(secs <= 0){
            elem.innerHTML = "Open";
            firstHeading.innerHTML = "Clear";
        }
        else{
            elem.innerHTML = secs;
        }
    }

    var checkTimeout = function(){
        if(secs <= 0){
        clearInterval(timer);
        }
        else{
            updateElem();
            secs--;
        }
    }

    var timer = setInterval( checkTimeout,1000);
}

Do notice that I didn't look up for the element inside my function, but I'll will find it outside and I could reuse this function with other elements, so in my main function I'll have something like this:

var element = document.getElementById("firstTblImageTimer");
countDown(10 , element);

answered Oct 01 '17 at 15:32

Yoni Lerner

52
2

you mean that This VAR ELEMENT and COUNDOWN function should be written outside of the function? – Muhammad Ameem Khan Oct 01 '17 at 15:46
var element = document.getElementById("firstTblTimer"); countDown(10 , element); function abc(){ if(firstTimer ="Open"){ firstHeading.innerHTML = "Reserved"; firstT.style.backgroundColor="#D27900"; – Muhammad Ameem Khan Oct 01 '17 at 15:55
function countDown( secs , elem ) { var updateElem = function(){ if(secs <= 0){ elem.innerHTML = "Open"; firstHeading.innerHTML = "Clear"; } else{ elem.innerHTML = secs; } } var checkTimeout = function(){ if(secs <= 0){ clearInterval(timer); } else{ updateElem(); secs--; } } var timer = setInterval( checkTimeout,1000); } }} – Muhammad Ameem Khan Oct 01 '17 at 15:55
still not working... but now its not even changing colors and heading... first it was changing – Muhammad Ameem Khan Oct 01 '17 at 15:57
you can share online snippets. there are plenty options. maybe http://collabedit.com? – Yoni Lerner Oct 01 '17 at 16:16

My Javascript CountDown() is not working

2 Answers2