Creating a timer with user input with html and js

Question

I am trying to create a simple timer, like the basic google one. I got it working until I tried to make it countdown from a value inputted by the user. I don't know why the code is no longer running. This is what I have so far:

<!DOCTYPE HTML>
<html>
  <body>
    <input id="userInput" type="number" defaultValue = "00"/> 
    <p id="timerr"> 00 </p>
    <button onclick="startTime()">Start time</button>
    <button onclick="stop()">Stop time</button>

    <script> 
      var myVar = setInterval(start, 1000);
      var timer = document.getElementbyId("userInput").value;

      function startTime(){ 

        document.getElementById("timerr").innerHTML = timer.value;
        myVar;
      } 

      function start(){
        document.getElementById("timerr").innerHTML = timer.value;
        timer.value--;
        if (timer == -1){
          stop();
          document.getElementById("timerr").innerHTML = "0";  
        }
      }

      function stop(){
        clearInterval(myVar);
      }
    </script>
  </body>
</html>

I am planning on making it better by making it countdown from minutes and hours, but I am just trying to get the seconds to function first. Thank you in advance.

Maybe have a look at this: plain count up timer in javascript — EGC
– EGC, Commented Oct 16, 2019 at 3:56

sam · Accepted Answer · 2019-10-16 04:07:11Z

1

Based on your current code structure, the following is a working version. Please check it.

<!DOCTYPE HTML>
<html>
  <body>
    <input id="userInput" type="number" value = "0"/> 
    <p id="timerr"> 00 </p>
    <button onclick="startTime()">Start time</button>
    <button onclick="stop()">Stop time</button>

    <script> 
      var myVar;
      var timer = document.getElementById("userInput");
      var countDownSeconds;
      function startTime(){ 
        myVar = setInterval(start, 1000);
        document.getElementById("timerr").innerHTML = timer.value;
        countDownSeconds = timer.value;
      } 

      function start(){
        countDownSeconds--;
        document.getElementById("timerr").innerHTML = countDownSeconds;
        if (countDownSeconds == -1){
          stop();
          document.getElementById("timerr").innerHTML = "0";  
        }
      }

      function stop(){
        clearInterval(myVar);
      }
    </script>
  </body>
</html>

answered Oct 16, 2019 at 4:07

sam

1,80713 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Catherine Borisova Over a year ago

Thank you so much. Can you explain why the countDownSeconds variable was necessary, and why I couldn't just use the timer variable?

sam Over a year ago

the way you use the timer variable. var timer = document.getElementbyId("userInput").value;, so timer itself is the value of the user input. then you use it like timer.value which doesn't make sense, because timer.value will always return undefined.

sam Over a year ago

even if you define var timer = document.getElementById("userInput");, every time, timer.value--;, which is equivalent to timer.value = timer.value -1, so you changed the user input value every second, which may seems not quite right. So, here, I use countDownSeconds to store the initial value of the user input, and then mutate it without change the value of user's input value.

Collectives™ on Stack Overflow

Creating a timer with user input with html and js

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related