A clock implemented using Moment.js This is a POC for a clock using moment.js, eventually I plan to recreate this in Raect.js. Any opimisations or a better way to do it?



&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Html clock&lt;/title&gt;
    &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.5/moment-timezone-with-data.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" type="text/css" href="stylesheet.css"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p id='show_time'&gt;&lt;/p&gt;
&lt;p id='show_date'&gt;&lt;/p&gt;
&lt;select id='timezone_list'&gt;&lt;/select&gt;
    &lt;script type="text/javascript"&gt;
        var list = moment.tz.names();
        var timezone;
        var sel = document.getElementById('timezone_list');
        for(var i = 0; i &lt; list.length; i++) {
            var opt = document.createElement('option');
            opt.innerHTML = list[i];
            opt.value = list[i];
            sel.appendChild(opt);
        }

        sel.onchange = function(){
            timezone=sel.options[sel.selectedIndex].text;
            console.log(timezone)
            setInterval(function(){
                var times = moment().tz(timezone).format('h:mm:ss a');
                var dates = moment().tz(timezone).format('MMMM Do YYYY');
                var par = document.getElementById('show_time');
                var par2 = document.getElementById('show_date');
                par.innerHTML= times;
                par2.innerHTML=dates;
            },1000);
        }
    &lt;/script&gt;
&lt;/body&gt;
I have created a function to prevent the one second delay.
Added moment().tz(timezone) as variable
Added all elements as variable
Added the date and time directly to the elements
Added a shorter way to add options




var list = moment.tz.names();
var timezone;

// elements
var elTimezoneList = document.getElementById('timezone_list');
var elTime = document.getElementById('show_time');
var elDate = document.getElementById('show_date');

// loop over timezones and set options
for(var i = 0; i &lt; list.length; i++) {
   elTimezoneList.appendChild(new Option(list[i], list[i]));
}

// time function to prevent the 1s delay
var setTime = function() {
  var time = moment().tz(timezone);

  // set time in html
  elTime.innerHTML= time.format('h:mm:ss a');

  // set date in html
  elDate.innerHTML = time.format('MMMM Do YYYY');
}

// on change select
elTimezoneList.onchange = function(){
  // set selected timezone
  timezone = elTimezoneList.options[elTimezoneList.selectedIndex].text;

  setTime();
  setInterval(setTime, 1000);
}
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Html clock&lt;/title&gt;
    &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.5/moment-timezone-with-data.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" type="text/css" href="stylesheet.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p id="show_time"&gt;&lt;/p&gt;
    &lt;p id="show_date"&gt;&lt;/p&gt;
    &lt;select id="timezone_list"&gt;&lt;/select&gt;
  &lt;/body&gt;
&lt;/html&gt;