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](https://stackoverflow.com/questions/5517597/plain-count-up-timer-in-javascript) — EGC, Oct 16 '19 at 03:56

score 1 · Accepted Answer · answered Oct 16 '19 at 04:07

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 '19 at 04:07

sam

1,767
12
15

Thank you so much. Can you explain why the countDownSeconds variable was necessary, and why I couldn't just use the timer variable? – Catherine Borisova Oct 16 '19 at 18:46
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 Oct 16 '19 at 21:58
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. – sam Oct 16 '19 at 22:04

Creating a timer with user input with html and js

1 Answers1