CODEWITHSUNDEEP
javascripttime
K.Denn
K.Denn

Reputation: 13

JavaScript Clock Issue

I am trying to create a clock that shows the time for 2 countries.

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8" />
    <script>
      function disptime() {

        now = new Date()

        hours = now.getHours();
        hours = hours < 10 ? "0" + hours:hours;

        minutes = now.getMinutes();
        minutes = minutes < 10 ? "0" + minutes:minutes;

        seconds = now.getSeconds();
        seconds = seconds < 10 ? "0" + seconds:seconds;

        milli = now.getTime();
        millib = milli + (6*60*60*1000);

        bhutan = new Date();
        bhutan = setTime(millib);

        bhutanHours = bhutan.getHours();
        bhutanHours = bhutanHours < 10 ? "0" + bhutanHours:bhutanHours;

        document.getElementById("bhutanClock").innerHTML=bhutanHours+ " : " + minutes + " : " + seconds;
        document.getElementById("UKClock").innerHTML=hours+ " : " + minutes + " : " + seconds;

        setTimeout("disptime()",1000);

      }
    </script>
  </head>
  <body onload="disptime()">
    <p id="bhutanClock"></p>

    <p id="UKClock"></p>
  </body>
</html>

Why is nothing seen in the browser when I load this page?

Upvotes: 0

Views: 70

Answers (2)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

First mistake: You need to apply setTime on a Date() object.

bhutan = bhutan.setTime(millib);

And change this part, as for some reason, it is displaying as milliseconds in integer:

bhutan = new Date();
bhutan = new Date(bhutan.setTime(millib));

Working Snippet

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="utf-8" />
  <script>
    function disptime() {

      now = new Date()

      hours = now.getHours();
      hours = hours < 10 ? "0" + hours : hours;

      minutes = now.getMinutes();
      minutes = minutes < 10 ? "0" + minutes : minutes;

      seconds = now.getSeconds();
      seconds = seconds < 10 ? "0" + seconds : seconds;

      milli = now.getTime();
      millib = milli + (6 * 60 * 60 * 1000);

      bhutan = new Date();
      bhutan = new Date(bhutan.setTime(millib));

      bhutanHours = bhutan.getHours();
      bhutanHours = bhutanHours < 10 ? "0" + bhutanHours : bhutanHours;

      document.getElementById("bhutanClock").innerHTML = bhutanHours + " : " + minutes + " : " + seconds;
      document.getElementById("UKClock").innerHTML = hours + " : " + minutes + " : " + seconds;

      setTimeout("disptime()", 1000);

    }
  </script>
</head>

<body onload="disptime()">

  <p id="bhutanClock">

  </p>

  <p id="UKClock">

  </p>


</body>

</html>

Works perfectly now: http://output.jsbin.com/bemuyawivu

Upvotes: 5

JCOC611
JCOC611

Reputation: 19709

The issue is with the line bhutan = setTime(millib);

The function setTime is not defined on the global scope. I believe you are looking for bhutan.setTime(millib) instead.

Additionally, the setTimeout should be replaced by setTimeout(disptime, 1000);.

Working fiddle.

Upvotes: 3

Related Questions