Countdown timer not counting down in by 1 second - Jquery/Javascript

Question

I'm 3 weeks new into Javascript and 2 days into Jquery. I'm having a problem with my countdown timer...

I want it to countdown from 30 seconds, when I click 'play', (element ID #play).

When I click play, the countdown timer appears in the correct element ID #countdown, at 29 seconds.

However, it's frozen and just doesn't countdown by 1 second. I'm not sure what I'm doing wrong!

Any help would be grand.

I've attached the basic html template code. And the JS I've written.

function init() {


  console.log('hello');

  const $play = $('#play');
  const $countdown = $('#countdown');

  let timeRemaining = 30;
  let timerOn = false;
  let timerId = null; //null is the same as false

  function countDownLogic() {

    if (timeRemaining > 0) {
      --timeRemaining;
      $countdown.html(timeRemaining);
      timerId = setInterval(1000);
      console.log('start timer');

      // IF COUNTDOWN HITS ZERO 
      if (timeRemaining === 0) {
        //$play.classList.remove('hide');
        console.log('time ends');
      } else {
        console.log('false');
      }
    } else {
      timerOn = false;
      clearInterval(timerId);
    }

    $play.html('PLAY AGAIN!');
  }

  $play.on('click', () => {
    if (!timerOn) {
      timerOn = true;
      countDownLogic();
      // timerId = setInterval(countDownLogic(), 1000);
    }
  });

}
$(init);

<header>Header</header>


<!-- PLAY BUTTON -->
<div><button id="play">Play</button></div>

<main>


  <section class="desktop section1">
    <div>Drop Movies Here</div>

    <div class="bottom">Take Guess Here</div>
  </section>

  <section class="section2">

    <!-- Form -->
    <div class="box" id='countdown'>
      <p></p>
    </div>


    <div class="box">
      <p>DIV 2</p>
    </div>

    <div class="box">
      <p>DIV 3</p>
    </div>

    <div class="box">
      <p>DIV 4</p>
    </div>

    <div class="box">
      <p>DIV 5</p>
    </div>

    <!-- BOX 3 -->
    <!-- <div class="box-2">
            <p>DIV 3</p>
          </div> -->

  </section>
</main>

Answer 1

You need to specify a function in the call to setInterval. And you shouldn't call this inside the function that repeats, you should call it to start the counter outside.

The argument to setInterval should be countDownLogic, not countDownLogic(). That calls the function immediately, instead of passing a reference to the function to setInterval.

function init() {


  console.log('hello');

  const $play = $('#play');
  const $countdown = $('#countdown');

  let timeRemaining = 30;
  let timerOn = false;
  let timerId = null; //null is the same as false

  function countDownLogic() {

    if (timeRemaining > 0) {
      --timeRemaining;
      $countdown.html(timeRemaining);
      console.log('start timer');

      // IF COUNTDOWN HITS ZERO 
      if (timeRemaining === 0) {
        //$play.classList.remove('hide');
        console.log('time ends');
      } else {
        console.log('false');
      }
    } else {
      timerOn = false;
      clearInterval(timerId);
    }

    $play.html('PLAY AGAIN!');
  }

  $play.on('click', () => {
    if (!timerOn) {
      timerOn = true;
      timerId = setInterval(countDownLogic, 1000);
    }
  });

}
$(init);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>Header</header>


<!-- PLAY BUTTON -->
<div><button id="play">Play</button></div>

<main>


  <section class="desktop section1">
    <div>Drop Movies Here</div>

    <div class="bottom">Take Guess Here</div>
  </section>

  <section class="section2">

    <!-- Form -->
    <div class="box" id='countdown'>
      <p></p>
    </div>


    <div class="box">
      <p>DIV 2</p>
    </div>

    <div class="box">
      <p>DIV 3</p>
    </div>

    <div class="box">
      <p>DIV 4</p>
    </div>

    <div class="box">
      <p>DIV 5</p>
    </div>

    <!-- BOX 3 -->
    <!-- <div class="box-2">
            <p>DIV 3</p>
          </div> -->

  </section>
</main>