Cannot use different clocks.

[wotta]

Hello,

I am trying to use the clock that shows on the homepage of momentjs.com to show twice with different timezones.
But my code is not working since it only shows one timezone.

Can somebody please show how to fix this.

Here is my code :

<span class="pull-left">
    <div class="hero-circle">
        <div class="hero-face">
            <div id="hour" class="hero-hour"></div>
            <div id="minute" class="hero-minute"></div>
            <div id="second" class="hero-second"></div>
        </div>
    </div>                                    
</span>

<span class="pull-right">
    <div class="hero-circle">
        <div class="hero-face">
            <div id="hour2" class="hero-hour"></div>
            <div id="minute2" class="hero-minute"></div>
            <div id="second2" class="hero-second"></div>
        </div>
    </div>
</span>

var currentLang = 'en',
    snippets = [];

function updateSnippets () {
    var i;

    moment.locale(currentLang);

    for (i = 0; i < snippets.length; i++) {
        snippets[i].render();
    }
}

function updateClock(timezone = "Europe/Amsterdam", selector = ""){
    var now = moment(),
        second = now.seconds() * 6,
        minute = now.minutes() * 6 + second / 60,
        hour = ((now.hours() % 12) / 12) * 360 + 90 + minute / 12;
    now.tz(timezone);

    $('#hour'+selector).css("transform", "rotate(" + hour + "deg)");
    $('#minute'+selector).css("transform", "rotate(" + minute + "deg)");
    $('#second'+selector).css("transform", "rotate(" + second + "deg)");
}

function spaces (length) {
    var out = "";
    while (out.length < length) {
        out += " ";
    }
    return out;
}

function Snippet (el) {
    var longest = 0,
        i,
        text  = this.text  = el.text().split('\n'),
        html  = this.html  = el.html().split('\n'),
        evals = this.evals = [];

    this.el = el;

    for (i = 0; i < text.length; i++) {
        longest = Math.max(text[i].length, longest);
        evals[i] = new Function('return ' + text[i]);
    }

    for (i = 0; i < text.length; i++) {
        html[i] += spaces(longest - text[i].length);
    }
}

Snippet.prototype.render = function () {
    var output = [],
        i;

    for (i = 0; i < this.html.length; i++) {
        output[i] = this.html[i];
        output[i] += '<span class="comment"> // ';
        output[i] += this.evals[i]();
        output[i] += '</span>';
    }

    this.el.html(output.join('\n'));
};


function timedUpdate () {
    updateClock();
    updateClock("America/Curacao", "2");
    updateSnippets();
    setTimeout(timedUpdate, 1000);
}

$('.page-moment-index code').each(function () {
    snippets.push(new Snippet($(this)));
});

timedUpdate();

$(document).on('click', '[data-locale]', function(){
    var dom = $(this);
    currentLang = dom.data('locale');
    $('[data-locale]').removeClass('active');
    dom.addClass('active');
    updateSnippets();
});

[icambron]

This is more of a question for StackOverflow. If you can narrow your issue down to a few lines of JS that demonstrate a call to Moment, what you expect it to return, and what it actually returns, we can help. But this isn't the right forum for seeking debugging help for your jQuery code.

[wotta]

Well I expected 2 different timezones to be used with 2 clocks.
So one for each but it is doing one for both.

But thanks for closing without waiting for a reply.
And yes I get your not a support forum.

[icambron]

@concept-core Well, look, it's like a hundred lines of code for generating HTML. Bug reports look like this:

moment("2016-05-25T09:00").something(); //returned 8, expected 9

Until you have something of that form, you haven't provided me with something I can help you with. I'd have to debug your code, figure out exactly what it expects of Moment, figure out how its behavior differs from that, and write a real bug report for you. For obvious reasons, I'm not going to do that, and frankly it's weird that you'd expect me to.

Isolating a bug can be hard work. But it's your hard work, not mine.

[wotta]

I understand but next time it would be helpfull to not close directly...
The problem on the other hand was that I did not call .tz on the moment() function.

Thanks anyway.