CODEWITHSUNDEEP
javascripthtml
nooby
nooby

Reputation: 85

Creating a stopwatch which counts down, Initial value from input box

I seem to only advance one digit upon button click and then it stops because the countdown is reverting to the initial value from the input box. I want an initial value entered into the input field, then used as the starting time for the countdown, which will continue until 0.

I'm quite stuck. Is there a solution?

function startButton() {
     //--inputValue
       var d = document.getElementById("inputValue").value;
       if (d != 0) {
             --d;    
             document.getElementById("demo").innerHTML = d;
             document.getElementById("omed").innerHTML = "Thank you";
      } 
      else 
      {
            document.getElementById("omed").innerHTML = "Please enter your time";
      }
}
<p>Stopwatch </p>

<input type = "number" id = "inputValue"> minutes</input>

<br><br>
<button onClick= "setInterval(startButton(), 1000)">Start counter!
</button>

<button onClick="clearInterval(myTimer)">Pause counter!
</button>

<p id = "demo"></p>

<br>

<p id = "omed">Enter countdown length</p>

Upvotes: 0

Views: 119

Answers (2)

Surajit
Surajit

Reputation: 89

I have modified your code. It seems what you are looking for.

var d = 0;

function setTime(){	
	d = document.getElementById("inputValue").value;
}

function stopwatch() {
    d--;
  	document.getElementById("demo").innerHTML = d;
    document.getElementById("omed").innerHTML = "Thank you";
    startButton()
}

var myTimer;
 function startButton() {
     if (d != 0) {
       myTimer = setTimeout(stopwatch, 1000);   
     } 
     else 
     {
       document.getElementById("inputValue").value="";
       document.getElementById("omed").innerHTML = "Please enter 				your time";
     }
	}
<input type = "number" id = "inputValue" onchange="setTime()"> minutes</input>

  <br><br>
   <button onClick= "startButton()">Start counter!
   </button>

   <button onClick="clearInterval(myTimer)">Pause counter!
   </button>

   <p id = "demo"></p>

   <br>

   <p id = "omed">Enter countdown length</p>

Upvotes: 0

JeroenE
JeroenE

Reputation: 703

What you want to do is to set a variable that contains a timer.

var myTimer = setInterval(function() { /* your action */ }, 60000 );

This will set a timer that fires every 1 minute the "your action" part. As you're using a variable you know how to access the timer and can stop/start it whenever you want.

Now in there we can put your code to update the HTML-element as: document.getElementById("demo").innerHTML = --d;

The code will be:

var myTimer = setInterval(function() { 
    document.getElementById("demo").innerHTML = --d;
}, 60000);

You can now stop the timer by calling: clearInterval(myTimer) anywhere you want. So you can still use that in your onClick.

The problem in the above example is that now it will count down even when it hits 0. So you want to stop it automatically as soon as it hits 0. This can be done by checking on the variable:

if (d !== 0) {
        document.getElementById("demo").innerHTML = --d;   
      }else {
        clearInterval(myTimer); // clear the timer when it hits 0 to make sure it'll not go under 0
      }

I have added some feedback in the code as well. But it's easy to read: If it's more then 0 then do: d - 1. If it's 0 then stop the timer. You could also put in the else { } a message that the timer is finished.

I changed a few things with the above information in your code:

var myTimer = null;
    
function startButton() {
       clearInterval(myTimer); // Clear the interval so it restarts when reclicking
       var d = document.getElementById("inputValue").value;
       if (d !== 0) {
        document.getElementById("demo").innerHTML = d;  // Set info ready so user knows countdown started. 
        myTimer = setInterval(function() {
          if (d !== 0) {
            document.getElementById("demo").innerHTML = --d;   
          }else {
            clearInterval(myTimer); // clear the timer when it hits 0 to make sure it'll not go under 0
          }
        }, 60000);
      }
      else 
      {
         document.getElementById("omed").innerHTML = "Please enter your time";
         myTimer.clearInterval();
      }
}
<p>Stopwatch</p>
    
<input type="number" id="inputValue"> minutes </input>

<br><br>
<button onClick="startButton()">Start counter!
</button>

<button onClick="clearInterval(myTimer)">Pause counter!
</button>

<p id = "demo"></p>
<br>
<p id = "omed">Enter countdown length</p>

Tip: For testing purpose it could be easier to use seconds (1000 instead of 60000) in the interval.

Upvotes: 2

Related Questions