When a number less than 10 is in the chronometer, the 0 at the start of the number is repeated

Question

I'm doing a chronometer, I want that when the number that appears in the chrono is less than 10, instead of 1, 2, 3..., will appear in the chrono 01, 02, 03...

function startchrono() {
  var     start         =     document.getElementById('start'),
          reset         =     document.getElementById('reset'),
          counter       =     document.getElementById('counter'),
          sCounter      =     0,
          mCounter      =     0,
          hCounter      =     0;

  setInterval(function () {
    sCounter++;
    if (sCounter == 60) {
      mCounter++;
      sCounter = 0;
    }

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

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

    if (hCounter < 10) {
      hCounter = "0" + hCounter;
    }
    counter.value = hCounter + " " + mCounter + " " + sCounter;
  }, 1000);
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Everything - everything you'll want is here.</title>
  </head>
  <body>
        <script src="js/chronometer.js" charset="utf-8"></script>
    <div class="w3-row w3-container">
      <div class="w3-col m3 w3-text-red">
        <p>     </p>
      </div>
      <div class="w3-col m6 w3-center w3-text-white w3-xxlarge">
        <p>
          <i>Everything you'll want is here.</i>
        </p>
      </div>
      <div class="w3-col m3 w3-text-red">
        <p>              </p>
      </div>
    </div>
    <div class="w3-container w3-row">
      <div class="w3-col m3 w3-text-red">
        <p>     </p>
      </div>
      <div class="w3-col m6 w3-center w3-xlarge w3-white w3-text-grey">
        <p>
          Chronometer
        </p>
      </div>
      <div class="w3-col m3 w3-text-red">
        <p>              </p>
      </div>
    </div>
    <div class="w3-container w3-row">
      <div class="w3-col m3 w3-text-red">
        <p>     </p>
      </div>
      <div class="w3-col m6 w3-center w3-white w3-text-grey">
        <input id="counter" type="text" name="name" value="00:00:00" readonly="readonly" class="w3-text-grey w3-center">
        <br>
        <p>                     </p>
        <input id="start" type="button" name="name" value="Start!" class="w3-btn w3-green" onclick="startchrono()">
        <input id="reset" type="button" name="name" value="Reset!" class="w3-btn w3-blue" onclick="reset();">
        <p>                                           </p>
      </div>
      <div class="w3-col m3 w3-text-red">
        <p>              </p>
      </div>
    </div>
  </body>
</html>

Possible duplicate of [How can I create a Zerofilled value using JavaScript?](http://stackoverflow.com/questions/1267283/how-can-i-create-a-zerofilled-value-using-javascript) — Mehraban, Jul 06 '16 at 14:03

score 0 · Accepted Answer · answered Jul 06 '16 at 14:10

You are concatenating the current counts in each iteration and therefore converting them to strings. The quick solution is to "cast" the variables to numbers at the beginning of each iteration like this:

mCounter = +mCounter;
hCounter = +hCounter;
sCounter = +sCounter;

See https://jsbin.com/tulipotafa/1/edit?html,js,output or:

function startchrono() {
  var     start         =     document.getElementById('start'),
          reset         =     document.getElementById('reset'),
          counter       =     document.getElementById('counter'),
          sCounter      =     0,
          mCounter      =     0,
          hCounter      =     0;

  setInterval(function () {
    mCounter = +mCounter;
    hCounter = +hCounter;
    sCounter = +sCounter;

    sCounter++;
    if (sCounter == 60) {
      mCounter++;
      sCounter = 0;
    }

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

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

    if (hCounter < 10) {
      hCounter = "0" + hCounter;
    }
    counter.value = hCounter + " " + mCounter + " " + sCounter;
  }, 1000);
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Everything - everything you'll want is here.</title>
  </head>
  <body>
        <script src="js/chronometer.js" charset="utf-8"></script>
    <div class="w3-row w3-container">
      <div class="w3-col m3 w3-text-red">
        <p>     </p>
      </div>
      <div class="w3-col m6 w3-center w3-text-white w3-xxlarge">
        <p>
          <i>Everything you'll want is here.</i>
        </p>
      </div>
      <div class="w3-col m3 w3-text-red">
        <p>              </p>
      </div>
    </div>
    <div class="w3-container w3-row">
      <div class="w3-col m3 w3-text-red">
        <p>     </p>
      </div>
      <div class="w3-col m6 w3-center w3-xlarge w3-white w3-text-grey">
        <p>
          Chronometer
        </p>
      </div>
      <div class="w3-col m3 w3-text-red">
        <p>              </p>
      </div>
    </div>
    <div class="w3-container w3-row">
      <div class="w3-col m3 w3-text-red">
        <p>     </p>
      </div>
      <div class="w3-col m6 w3-center w3-white w3-text-grey">
        <input id="counter" type="text" name="name" value="00:00:00" readonly="readonly" class="w3-text-grey w3-center">
        <br>
        <p>                     </p>
        <input id="start" type="button" name="name" value="Start!" class="w3-btn w3-green" onclick="startchrono()">
        <input id="reset" type="button" name="name" value="Reset!" class="w3-btn w3-blue" onclick="reset();">
        <p>                                           </p>
      </div>
      <div class="w3-col m3 w3-text-red">
        <p>              </p>
      </div>
    </div>
  </body>
</html>

Thank you for answering my question. However, that '+' that you added in the variables, with that symbol you can convert every integer into a string? — Uniformly Continuous, Jul 06 '16 at 14:27
The other way. From string to number. It's just a shorthand for Number(string) or parseInt(string). — kenda, Jul 06 '16 at 21:11

score 0 · Answer 2 · answered Jul 06 '16 at 14:16

Using setInterval in this manner will cause the clock to drift considerably.

In stead you could calculate the difference between two dates. Create a date-instance when you start the clock and at every step calculate the time-difference and then format it to your hearts desire. Assuming that now and then are date-objects it would look something like the following:

var diff = new Date(now - then);
var timeString = diff.toISOString().substr(11,8)

When a number less than 10 is in the chronometer, the 0 at the start of the number is repeated

2 Answers2