Add an existing ClickEvent to a button?

Question

I have a timer written in javascript. When I click the timer in my HTML page, it will pause. If I click it again, it will continue counting.

This is the timer code:

var Timer = function() {}
Timer.prototype = {
    refresh: null,
    focus: null,
    sec: 0,
    min: 0,
    hour: 0,
    paused: false,
    init: function(el) {
        var that = this;
        this.el = el;
        this.clickEvent();
        return this;
    },
    set: function(t) {
        t = t.split(':');
        this.hour = t[0];
        this.min = t[1];
        this.sec = t[2];
        return this;
    },
    bindFocus: function() {
        var that = this;
        clearInterval(this.focus);
        if (document.hasFocus)
            that.focus = setInterval(function() {
                if (document.hasFocus()) {
                    if (that.paused) {
                        window.clearInterval(this.refresh);
                        that.go();
                    }
                } else
                    that.stop();
                }, 200);
    },
    clickEvent: function() {
        var that = this, frag = $('<h2>').addClass('pauseGame').text(texts.pause), toggleFlag = true;
        this.el.bind('click', timerClicked);
        function timerClicked(callback) {
            if (!toggleFlag)
                return;
            toggleFlag = false;
            if (that.paused === false) {
                that.stop();
                window.clearInterval(that.focus);
                $('#options > button').not('#options > .pause').prop('disabled', true);
                $('#options > .pause').text('Resume');
                board.mainBoard.fadeOut(400, function() {
                    frag.css({
                        letterSpacing: '25px',
                        opacity: 0
                    });
                    $(this).after(frag).detach();
                    frag.parent().addClass('paused');
                    frag.animate({
                        opacity: 1
                    }, {
                        queue: false,
                        duration: 400
                    }).animate({
                        letterSpacing: '-4px'
                    }, 700, "easeOutBack", function() {
                        toggleFlag = true;
                    });
                });
                that.el.addClass('pause');
            } else {
                $('#options > button').prop('disabled', false);
                $('#options > .pause').text('Pause');
                options.undoToggle();
                frag.animate({
                    opacity: 0,
                    letterSpacing: '25px'
                }, 600, "easeInBack", function() {
                    $(this).parent().removeClass('paused').end().remove();
                    board.container.prepend(board.mainBoard).removeAttr('style');
                    board.mainBoard.fadeIn(400);
                    that.go();
                    toggleFlag = true;
                });
                this.className = '';
            }
        }
    },
    restart: function(el) {
        this.sec = this.min = this.hour = 0;
        this.el.text('00:00');
        this.stop().go();
    },
    go: function(now) {
        var that = this;
        this.paused = false;
        if (now)
            updateClock();
        window.clearInterval(this.refresh);
        that.refresh = window.setInterval(updateClock, 1000);
        function updateClock() {
            that.sec++;
            if (that.sec == 60) {
                that.sec = 0;
                that.min++;
            }
            if (that.sec < 10)
                that.sec = "0" + that.sec;
            if (that.min == 60) {
                that.min = 0;
                that.hour++;
            }
            var hours = (that.hour > 0) ? ((that.hour <= 9) ? "0" + that.hour : that.hour) + ":": '';
            that.el.html(hours + ((that.min <= 9) ? "0" + that.min : that.min) + ":" + that.sec);
        }
        return this;
    },
    stop: function() {
        this.paused = true;
        window.clearInterval(this.refresh);
        return this;
    }
};

I also want to pause the timer when clicking a button and resume the timer when clicking this button again (OR the timer). The current button code I have is in simple HTML:

<div id="options">
    <button class="pause" title="pause/resume the game">Pause</button>
</div>

So how to so this? I want it so that it doesn't matter if you click the button or the timer, both should pause the timer or resume it.

Many thanks

score 1 · Answer 1 · edited May 23 '17 at 10:31

1

You want to simulate a click? This post will help you

edited May 23 '17 at 10:31

Community

1
1

answered Nov 24 '13 at 19:39

Alexander Schranz

2,154
2
25
42

score 0 · Accepted Answer · answered Nov 25 '13 at 20:46

0

Got it: timer.el.trigger('click'); did the trick for me

answered Nov 25 '13 at 20:46

Maurice

1,147
2
21
49

Could you give us a bit more context of where in your code sample you made that change? As it is now, this answer doesn't really tell us how to solve the problem, and why the above fixed it. – Jeff B Nov 25 '13 at 21:07
Sure, though it was a bit of trail and error. This part in the timer code triggered/binds the pause:'this.el.bind('click', timerClicked);' So I've used this to mimic it. When I now click the button it "simulates" a click on the timer. Alexander's remark pointed me in the right direction. – Maurice Nov 27 '13 at 11:59

Add an existing ClickEvent to a button?

2 Answers2