How do I make a countdown feature in a button in HTML5-CodePudding

I am creating a clicker-like game in HTML5 Javascript and for the clicking part, there is a timeout... I tried it my self but for some reason it does not work. HTML:

function pursuit() {
  var btn = document.getElementById("pursuit");
  setInterval(function(){
    timeOnPursuit -= 1;
  }, 1000)
  while(timeOnPursuit > 0){
    btn.value = "In Pursuit: "   timeOnPursuit;
  }
}

<div class="button">
  <button id="pursuit" class="pursuit" onClick="pursuit()"> Go on a Pursuit </button>
</div>

CodePudding user response：

A few things to consider here...

First, the code is producing an error in the browser console. You never defined the timeOnPursuit variable, so you aren't really controlling its scope. Simply declare that variable with an initial value (whatever value you like) before trying to use it:

var timeOnPursuit = 10;

Aside from that, your loop is going to block the thread. Because the variable is initially greater than 0, and because nothing in that loop modifies that value, it's going to run forever and never let the interval get a chance to modify the value.

Get rid of the loop entirely and rely on the interval instead. Within the interval you can update the UI. (Which, incidentally, should probably be innerText instead of value in this case.) Then within that interval you can also check when to stop the interval, which is what I suspect you were trying to do with the loop.

For a bonus, you might also want to disable the button so the user can't click it again, which would create another counter.

Overall, maybe something like this:

function pursuit() {
  var btn = document.getElementById("pursuit");
  
  // Start the "pursuit"
  var timeOnPursuit = 10;
  btn.innerText = "In Pursuit: "   timeOnPursuit;
  btn.disabled = true;

  // Repeat every second
  var interval = setInterval(function(){
  
    // Update the "pursuit"
    timeOnPursuit -= 1;
    btn.innerText = "In Pursuit: "   timeOnPursuit;
    
    // Stop the interval at 0
    if (timeOnPursuit <= 0) {
      clearInterval(interval);
    }
  }, 1000)
}

<div class="button">
  <button id="pursuit" class="pursuit" onClick="pursuit()"> Go on a Pursuit </button>
</div>

CodePudding user response：

function pursuit() {
  let timeOnPursuit = 10 // define time
  var btn = document.getElementById("pursuit");
  const timer = setInterval(function() {
    console.log(timeOnPursuit)
    if (timeOnPursuit > 0) {
      btn.innerHTML = "In Pursuit: "   timeOnPursuit;
      timeOnPursuit -= 1; // reduce time
    } else {
      btn.innerHTML = "Pursuit";
      clearInterval(timer) // stop the timer
    }
  }, 1000)

}

<div class="button">
  <button id="pursuit" class="pursuit" onClick="pursuit()"> Go on a Pursuit </button>
</div>

CodePudding user response：

I was going to write a lot of what David wrote so it seems a little redundant now. Instead here's an alternative approach that uses setTimeout instead of setInterval.

// Cache the element and add a click listener to it
// (no need for inline JS)
const btn = document.querySelector(".pursuit");
btn.addEventListener('click', pursuit, false);

function pursuit() {
  
  // Initialise timeOnPursuit
  function loop(timeOnPursuit = 10) {

    // Display the button text, and disable the button
    btn.innerText = `In Pursuit: ${timeOnPursuit}`;
    btn.disabled = true;

    // If timeOnPursuit is greater than zero
    // call loop again with a a decremented timeOnPursuit
    if (timeOnPursuit > 0) {
      setTimeout(loop, 1000, --timeOnPursuit);  
    }
  }

  // Call the loop function
  loop();

}

<div class="button">
  <button class="pursuit"> Go on a Pursuit </button>
</div>