I don't know how to make this show within the html. what is wrong with this script?

Question

I wrote the following js. I want it to count down inside the div-element. Please help. I've exhausted everything I could think of. Is this a problem in the HTML or am I just not passing things correctly in my js code?

<html>

<head>
  <title>Counter</title>
  <script>
    var el, usr_t, split_list, mins, secs;

    function getValues() {

      el = document.getElementById("timer");

      usr_t = document.getElementById("time").value;
      split_list = usr_t.split(":").map(Number);

      mins = split_list[0];
      secs = split_list[1];

      while (mins >= 0) {
        for (var i = secs; i > 0; i--) {
          setDelay(i);
        }
        secs = 59;
        mins--;
      }
    }

    function setDelay(i) {
      setTimeout(function() {
        el.innerHTML = (mins + ":" + secs);
      }, 1000);
    }
  </script>
</head>

<body>
  <form>
    Enter your time: (mm:ss)
    <br>
    <input type="text" id="time">
    <br>
    <input type="submit" value="Start" onclick="getValues()">
  </form>

  <div id="timer"></div>
</body>

</html>

score 1 · Answer 1 · answered Oct 19 '16 at 09:18

you should not use type="submit" rather use type="button" if you have to use input. Also a better approach for implementing the count down timer in my opinion would be to use setInterval rather than a while loop with delay. You can perform your checks within setInterval.

http://www.w3schools.com/jsref/met_win_setinterval.asp

score 0 · Answer 2 · answered Oct 19 '16 at 09:12

The reason is you are using a form. Whenever you press that button (actually a form submit button), the page will be refreshed.

Try changing your html body to this:

<body>
    Enter your time: (mm:ss)<br>
    <input type="text" id="time"><br>
    <button onclick="getValues()">Start</button>

    <div id = "timer"></div>
</body>

selvakumar · Answer 3 · 2016-10-19T11:23:13.827

Please find the working example code below, clear the interval when you need.

Html:

<body>

        Enter your time: (mm:ss)<br>
        <input type="text" id="time"><br>
        <input type="submit" value="Start" onclick="timer();">
    <div id = "timer"></div>
</body>

JS:

 var el, usr_t, split_list, mins, secs;
 el = document.getElementById("timer");

function calc(){
        secs = secs-1;
        if(secs == 0){
           mins = mins-1;
           el.innerHTML = (mins + ":" + secs);
           secs = 59;
        }   
    el.innerHTML = (mins + ":" + secs);

}

function timer(){
     el = document.getElementById("timer");
     usr_t = document.getElementById("time").value;
     split_list = usr_t.split(":").map(Number);

     mins = split_list[0];
     secs = split_list[1];

     setInterval(calc, 1000);
}

I have made a change and its working properly. check it. – selvakumar Oct 19 '16 at 11:23 — selvakumar, Oct 19 '16 at 11:23

thekodester · Answer 4 · 2019-03-26T16:49:19.763

It a nice idea your JavaScript method.

<form method="post" onsubmit="event.preventDefault();getValues();">

You can still use input with type of submit but instead call the function on the form tag and prevent the default form action. Also your JavaScript has some bugs it won't actually continue count down like a timer. Using some of your code this is what I did:

var el, usr_t, split_list, mins, secs, myTimer;

function getValues() {

  // clear timer (incase user clicks button again)
  clearInterval(myTimer);

  // get variables
  el = document.getElementById("timer");

  usr_t = document.getElementById("time").value;
  split_list = usr_t.split(":").map(Number);

  mins = split_list[0];
  secs = split_list[1];

  // validate correct minute or second
  if (mins === undefined || secs === undefined || mins > 60 || mins < 0 || secs > 60 || secs < 0) {
    el.innerHTML = "Please enter valid time.";
  } else {
    myTimer = setInterval(function() {

      // update timer
      el.innerHTML = (mins + ":" + secs);

      // if minutes hit zero end timer
      if (mins == 0) {
        clearInterval(myTimer);
      }

      // if seconds hit zero reset and reduce a minute
      if (secs == 0) {
        mins--;
        secs = 59;
      }
      secs--;

    }, 1000);
  }
};

Also if interest read this stackoverflow on setTimeout vs setInterval.

score 0 · Accepted Answer · edited May 23 '17 at 11:48

The following is more or less the same code I showed you in your other question Update timer inside div. JavaScript which built my answer to your other question How to repeatedly update the contents of a <div> by only using JavaScript?.

You are still using setTimeout() in a loop. That while loop is calling setDelay() over and over again which creates a bunch of timeouts that will all call their given callback at the same time which is to set your output div to the time left (which will be 0 since the decrementer loop is finished).

var el = document.getElementById("timer"),
  minsInput = document.getElementById("mins"),
  secsInput = document.getElementById("secs"),
  timerForm = document.getElementById("timer-form");


function countAway() {
  var mins = minsInput.value,
    secs = secsInput.value;

  (function countDown() {
    if (secs || mins) {
      setTimeout(countDown, 100); // Should be 1000, but I'm impatient
    }
    el.innerHTML = mins + ":" + (secs.toString().length < 2 ? "0" + secs : secs); // Pad number
    secs -= 1;
    if (secs < 0) {
      mins -= 1;
      secs = 59;
    }
  }());
}

timerForm.addEventListener("submit", function(submitEvent) {
  countAway();
  submitEvent.preventDefault();
});

<form id="timer-form" action="#" method="post">
  <fieldset>
    <legend>Timer</legend>
    <ul>
      <li>
        <label for="mins">Minutes</label>
        <input id="mins" type="number" value="1" min="0" max="60">
      </li>
      <li>
        <label for="secs">Seconds</label>
        <input id="secs" type="number" value="30" min="0" max="60">
      </li>
      <li>
        <button type="submit">Start</button>
    </ul>
  </fieldset>
</form>

<div id="timer"></div>

I don't know how to make this show within the html. what is wrong with this script?

5 Answers5