JavaScript Trying to make a clock for html, can't tell what's broken

Question

JavaScript Trying to make a clock for html, can't tell what's broken. This js clock works fine on a Sharepoint site, but I'm trying to implement it on a local file and it somehow broke along the way. I'm trying to use getElementById to find the <span id> and change the text to the current time. I can't tell what exactly is broken. Thank you for taking a look. Original JSFiddle, Updated JSFiddle. UPDATE: I tried to tidy up the code and now instead of a blank <span> it now gives me a false output. So I guess you could say progress was made. I still don't exactly know whats broken, but the quest continues!
UPDATE 2: Thanks to StackSlave, did a bit of formatting, here is the Final JSFiddle, it works just fine in Chrome, but JSFiddle doesn't quite like it. Thank you to all who helped me in this endeavor.

window.addEventListener('load', Elements, false);
window.addEventListener('load', getElement, false);
window.addEventListener('load', worldClock, false);

  function Elements() {
    getElement("Zulu", worldClock(0, "NODST") );
    getElement("NewYork", worldClock(-9, "NAmerica"));
    setTimeout(Elements, 1e3);
  }

  function getElement(Id, time) {
      var a = document.getElementById(Id);
        if (a)
          a.innerHTML = time;
        else {
            return
          }
  }

  function worldClock(offset, timezone){
    var common = 0;
        a = new Date(new Date().getTimezoneOffset() * 6e4);
        getDate = a.getDate();
        getMonth = a.getMonth();
        getYear = a.getYear();
    return a.getYear < 1e3 && (a.getYear += 1900);
            monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
            days = ["31", "28", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"],
            getYear % 4 == 0 && (days = ["31", "28", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"]),
            getYear % 100 == 0 && getYear % 400 != 0 && (days = ["31", "28", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"]),
            w = 0,
            offset != 0 && offset % 1 != 0 && (w = offset % 1 * 60),
            l = a.getMinutes() + w,
            l > 59 ? (e = a.getHours() + Math.floor(n) + 1,
            l -= 60) : e = a.getHours() + Math.floor(n),
            y = a.getSeconds(),
            e >= 24 && (e = e - 24,
            s -= -1),
            e < 0 && (e -= -24,
            s -= 1),
            e < 10 && (e = " " + e),
            l < 10 && (l = "0" + 1),
            y < 10 && (y = "0" + y),
            s <= 0 && (0 == 0 ? (o = 11,
            getYear -= 1) : o = o - 1,
            s = days[0]),
            s > days[0] && (s = 1,
            o == 11 ? (o = 0,
            getYear -= 1) : o -= -1),
            t == "NODST" && (c = 0),
            t == "NAmerica" && (u = new Date(),
            i = new Date(),
            u.setMonth(2),
            u.setHours(2),
            u.setDate(13),
            f = u.getDay(),
            f != 0 ? u.setDate(8 - f) : u.setDate(1),
            i.setMonth(9),
            i.setHours(1),
            i.setDate(31),
            f = i.getDay(),
            i.setDate(31 - f),
            r = new Date(),
            r.setMonth(o),
            r.setYear(h),
            r.setDate(s),
            r.setHours(e),
            r >= u && r < i && (c = 1));
  }

<html>

  <head>
    <script type="text/jscript" src="./clock.js"></script>
  </head>

  <body>
    <div class="clock">
      New York:
      <span id="NewYork"> </span>
      Zulu:
      <span id="Zulu"> </span>
    </div>
  </body>

</html>

This code is really bad. Is it minified? – kornieff Dec 06 '19 at 05:07 — kornieff, Dec 06 '19 at 05:07

score 1 · Answer 1 · answered Dec 05 '19 at 21:52

1

From the beginning when setting the timeout you use as callback a lowercase "time" and it is not the function, but it's returning value because of the "()"

setTimeout(time(), 1e3);

if I understood well should be:

 setTimeout(Time, 1e3);

maybe it is not enough to make it work, but surely it is enough to not make it work.

answered Dec 05 '19 at 21:52

Beppe

11
4

I changed it like you said, had no apparent effect. – user8799458 Dec 06 '19 at 01:27
I did not say it would make it work. As I can see at first glance the variable "monthnames" and all that follows is after a return statement, and what is returned is a boolean value (true/false), maybe the one you say you see on the page. I wonder if you really need that obscure worldClock function to achieve what you want. I'd rather read the documentation of Date (for example [link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)) – Beppe Dec 12 '19 at 16:56

score 0 · Answer 2 · answered Dec 06 '19 at 05:16

Your code is completely unreadable, you should definitely reconsider your variable naming and structure. Two things from skimming through it:

You are not returning a list by returning a comma-separated list of expressions. The comma operator only returns the last value in the list, so worldClock will return r >= u && r < i && (c = 1))
You are not passing a reference to the Time function to setTimeout, you are passing the result of a function call. You meant setTimeout(Time, 1e3)
The function is called Time, you are trying setTimeout with time. JS is case-sensitive, rename your function to time

I would be surprised if the function works though, in my experience unreadable code is unreliable code. But try it out and tell me if it works! Good luck!

I agree with you on it being unreadable, the original version that I pulled was worse. I corrected the capitalization and `setTimeout` like you said, it didn't have any apparent effect. I'm going to take a look at the `function worldClock` and try to sort through it. I appreciate the help @dev — user8799458, Dec 06 '19 at 20:32

StackSlave · Accepted Answer · 2019-12-10T03:14:25.693

Let's keey this simple:

//<![CDATA[
/* js/external.js */
var doc, bod, I, ClockMaker; // for use on other loads
addEventListener('load', function(){
doc = document; bod = doc.body;
I = function(id){
  return doc.getElementById(id);
}
ClockMaker = function(output, offset){
  this.clocks = [];
  var t = this;
  function out(a){
    var o = a[1] || 0, dt = new Date(3600000*o+Date.now());
    a[0].innerHTML = dt.toUTCString();
  }
  setInterval(function(){
    t.clocks.forEach(out);
  }, 10);
  this.clock = function(output, offset){
    this.clocks.push([output, offset]);
    return this;
  }
}
var clocks = new ClockMaker;
clocks.clock(I('ny'), -5).clock(I('zu'));
}); // end load
//]]>

/* css/external.css */
html,body{
  box-sizing:border-box; padding:0; margin:0;
}
h2{
  margin:5px 7px;
}
h2,h2+div{
  display:inline-block;
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
    <title>Simple Clock</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script type='text/javascript' src='js/external.js'></script>
  </head>
<body>
 <div><h2>New York:</h2><div id='ny'></div><div>
 <div><h2>Zulu:</h2><div id='zu'></div></div>
</body>
</html>

You can access dt to use other UTC methods.

JavaScript Trying to make a clock for html, can't tell what's broken

3 Answers3