Databases
StackOverflow2013
Postsdbo
POAdd an existing ClickEvent to a button?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAdd an existing ClickEvent to a button?
    text
    copied!<p>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.</p> <p>This is the timer code:</p> <pre><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 = $('&lt;h2&gt;').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 &gt; button').not('#options &gt; .pause').prop('disabled', true); $('#options &gt; .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 &gt; button').prop('disabled', false); $('#options &gt; .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 &lt; 10) that.sec = "0" + that.sec; if (that.min == 60) { that.min = 0; that.hour++; } var hours = (that.hour &gt; 0) ? ((that.hour &lt;= 9) ? "0" + that.hour : that.hour) + ":": ''; that.el.html(hours + ((that.min &lt;= 9) ? "0" + that.min : that.min) + ":" + that.sec); } return this; }, stop: function() { this.paused = true; window.clearInterval(this.refresh); return this; } }; </code></pre> <p>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:</p> <pre><code>&lt;div id="options"&gt; &lt;button class="pause" title="pause/resume the game"&gt;Pause&lt;/button&gt; &lt;/div&gt; </code></pre> <p>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.</p> <p>Many thanks</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload