CODEWITHSUNDEEP
javascripthtml
Nikola
Nikola

Reputation: 25

Countdown It does not Work with click button

I have a simple question. I want to make this code work with the Reset time button when the time is start again from 30 min delete the ( You are Ready! ) and start the time

var seconds = 30;
function secondPassed() {
  var minutes = Math.round((seconds - 30) / 60);
  var remainingSeconds = seconds % 60;
  
  if (remainingSeconds < 10) {
    remainingSeconds = "0" + remainingSeconds;
  }

  document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
  
  if (seconds == 0) {
    clearInterval(countdownTimer);
    document.getElementById('countdown').innerHTML = "You are Ready!";
  } else {
    seconds--;
  }
}
var countdownTimer = setInterval('secondPassed()', 1000);

<span id="countdown" class="timer">
<a href="#container" onclick="secondPassed()">Reset time</a>

Upvotes: 2

Views: 273

Answers (3)

Sampson
Sampson

Reputation: 268354

Let's assume something quite basic, like the following:

<div>00:00</div>
<button>Reset</button>

Below is an approach you could take, fully-commented.

// We'll start by getting a couple element references
const label = document.querySelector("div");
const button = document.querySelector("button");

// Next, we'll bind-up the click handler for the button
button.addEventListener("click", () => {

  // When the user clicks the button, we'll set the time
  // limit to 30 minutes and proceed
  let timer = 60 * 30;

  // Disable the button to prevent further clicks
  button.disabled = true;
  button.dataset.default = button.textContent;
  button.textContent = "Now counting down!";

  // Let's setup some code that will be executed every second
  button.interval = setInterval(() => {

    // This decimal will be a number like 29.9521
    const decimal = timer / 60;
    // We'll convert 29.9521 into 29, for 29 minutes
    const wholeMinute = Math.floor(decimal);
    // Next, we'll take the .9521 and multiply by 60 for seconds
    const wholeSecond = Math.round(60 * (decimal - wholeMinute));

    // We'll pad both of the numbers so they always have a leading 0
    const lblMin = wholeMinute.toString().padStart(2, 0);
    const lblSec = wholeSecond.toString().padStart(2, 0);

    // As long as we aren't out of seconds
    if (timer >= 0) {
      // Reduce the timer by 1 second
      timer = timer - 1;
      // And print the new label on our label element
      label.textContent = `${ lblMin }:${ lblSec }`;
      // Then return, so we don't execute what comes next
      return;
    }

    // If we made it this far, our timer ran out
    // Start by enabling the button
    button.disabled = false;
    // Restore the original text of the button
    button.textContent = button.dataset.default;
    // And clear our interval, as it is no longer needed
    clearInterval(button.interval);

    // Our interval will 'tick' once every second (1000 milliseconds)
  }, 1000);

});

Upvotes: 0

Kawser Habib
Kawser Habib

Reputation: 1422

Here create a separate function where after clicking - it disables the button, sets the timer, and changes button text.

In secondPassed method, if seconds == 0, it enables the button, so that you can start count down again.

var seconds = 30;
var countdownTimer;
function secondPassed() {
    var minutes = Math.round((seconds - 30) / 60);
    var remainingSeconds = seconds % 60;
    if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds;
    }

    document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;

  if (seconds == 0) 
  {
    clearInterval(countdownTimer);
    document.getElementById('reset').disabled  = false;
    document.getElementById('countdown').innerHTML = "You are Ready!";
  } else 
  {
    seconds--;
  }
}
function start(){
  seconds = 30;
  document.getElementById('reset').innerHTML = "Reset";
  document.getElementById('reset').disabled  = true;
    countdownTimer = setInterval('secondPassed()', 1000);
}
//on load call
start();
<div>
  <span id="countdown" class="timer"/>
</div>
<button id="reset" onclick="start()">
  Start
</button>

Upvotes: 1

brein
brein

Reputation: 1419

I created a new function to reset the seconds and restart the timer and linked it to the button. I have also isolated at the start of the js code the variables that will count the seconds and hold the reference to the Interval.

is this what you are looking for?

var seconds;
var countdownTimer;

function startTimer() {
  if (!seconds || seconds == 0) {
    seconds = 30;
    clearInterval(countdownTimer);
    countdownTimer = setInterval(secondPassed, 1000)
    secondPassed();
  }
}

function secondPassed() {
  var minutes = Math.round((seconds - 30) / 60);
  var remainingSeconds = seconds % 60;

  if (remainingSeconds < 10) {
    remainingSeconds = "0" + remainingSeconds;
  }

  document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;

  if (seconds == 0) {
    clearInterval(countdownTimer);
    document.getElementById('countdown').innerHTML = "You are Ready!";
  } else {
    seconds--;
  }
}

startTimer();
<html>

<body>
  <div>
    <span id="countdown" class="timer"></span>
  </div>
  <a href="#container" onclick="startTimer()">Reset time</a>
</body>

</html>

Upvotes: 1

Related Questions