when i click my button, a timer is supposed to display a countdown timer. But the button does not work.

let timerCounter = document.getElementById("timer-counter");
let timer;
let timerCount;

function startTimer() {
  timer = setInterval(function() {
    timerCount--;
    timerElement.textContent = "Time; "   timerCount;
    if (timerCount === 0) {
      clearInterval(timer);
    }
  });
}
startButton.addEventListener("click", startTimer);

CodePudding user response：

This is what I found so far:

• You are decrementing the timerCount, need to specify the initial value for it to work.
• You're using timerElement instead of timerCounter that you've declared.
• You must pass the second args to the setInterval which is delay.

const timerCounter = document.getElementById('timer-counter');
const startButton = document.getElementById('start-button');

let timer;
let timerCount = 30;

startButton.addEventListener('click', startTimer);

function startTimer() {
  timer = setInterval(function () {
    timerCount--;
    timerCounter.textContent = 'Time; '   timerCount;
    if (timerCount === 0) {
      clearInterval(timer);
    }
  }, 1000);
}

<div id="timer-counter"></div>
<button id="start-button">Start</button>

CodePudding user response：

Here's a slightly different approach that avoids some of the problems with global variables. The function the listener calls initialises the count, and then returns a new function (a closure) that is called when the button is clicked. It also uses setTimeout which I find more easy to understand.

// Cache your elements
const counter = document.querySelector('#counter');
const startButton = document.querySelector('button');

// Initialise your count variable
function startTimer(count = 30) {

  // Return a function that is called from
  // the listener
  return function loop () {

    // Disabled the button once it's been clicked
    if(!startButton.disabled) startButton.disabled = true;      

    counter.textContent = `Time: ${count}`;
    if (count > 0) {
      setTimeout(loop, 500, --count);
    }
  }

  loop();

}

// Call startTimer to initialise the count, and return
// a new function that is used as the listener
startButton.addEventListener('click', startTimer(), false);

<div id="counter"></div>
<button>Start</button>

CodePudding user response：

I'm sure this could be improved.

• In this example we don't go below 0.
• We don't allow timeout collisions ( timeouts don't stack causing weird counting speeds ).
• We can reset to the original number when on 0.

const c = document.getElementById('timer-counter')
const b = document.getElementById('start-button')

let timer = false
let timerCount = 30

b.addEventListener('click', start)

function decrement() {

    if(timerCount < 0) {
        timerCount = 30
        timer = false
        return
    }

    c.innerText = `Count: ${timerCount}`
    timerCount--

    timer = setTimeout(decrement, 200)
}

function start() {
    if(timer) return

    decrement()
}

<div id="timer-counter"></div>
<button id="start-button">Start</button>