Jquery Mobile stopwatch

Question

Im trying to make a stopwatch in a JqueryMobile app. I've been following the guide from a previous post How to create a stopwatch using JavaScript?

This works but the function to create the button, essential just makes 3 links, where as I want them as buttons. So at present it will generate the html of:

<a href="#start" class="ui-link">start</a>

where as I need it to be

<a href="#start" data-role="button" class="ui-link">start</a>

I've played around with the function to try to get it to work, and even just added my own buttons into the HTML with hrefs of #start, #stop, #reset but cant get them to work

The function is:

function createButton(action, handler) {
    var a = document.createElement("a");
    a.href = "#" + action;
    a.innerHTML = action;
    a.addEventListener("click", function(event) {
        handler();
        event.preventDefault();
    });
    return a;
}

How are you using/calling `createButton()`? Anything like [this](http://jsfiddle.net/pxb6rarx/)? — Hanlet Escaño, Dec 03 '15 at 23:07

ezanker · Accepted Answer · 2015-12-04T17:26:11.047

Add the classes ui-btn ui-btn-inline to the links in createButton. As you are using jQuery anyway, I hvae also updated the stopwatch to use jQuery for DOM manipulation:

(function($) {
    var Stopwatch = function (elem, options) {

      var timer = createTimer(),
        startButton = createButton("start", start),
        stopButton = createButton("stop", stop),
        resetButton = createButton("reset", reset),
        offset,
        clock,
        interval;

      // default options
      options = options || {};
      options.delay = options.delay || 1;

      var $elem = $(elem);

      // append elements     
      $elem.empty()
           .append(timer)
           .append(startButton)
           .append(stopButton)
           .append(resetButton);


      // initialize
      reset();

      // private functions
      function createTimer() {
        return $('<span class="swTime"></span>');
      }

      function createButton(action, handler) {
        var a = $('<a class="' + action + ' ui-btn ui-btn-inline">' + action + '</a>');
        a.on("click",function (event) {
          handler();
          event.preventDefault();
        });    
        return a;
      }

      function start() {
        if (!interval) {
          offset = Date.now();
          interval = setInterval(update, options.delay);
        }
      }

      function stop() {
        if (interval) {
          clearInterval(interval);
          interval = null;
        }
      }

      function reset() {
        clock = 0;
        render();
      }

      function update() {
        clock += delta();
        render();
      }

      function render() {
        timer.text(clock / 1000);
      }

      function delta() {
        var now = Date.now(),
          d = now - offset;

        offset = now;
        return d;
      }

      // public API
      this.start = start;
      this.stop = stop;
      this.reset = reset;
    };

    $.fn.stopwatch = function(options) {
        return this.each(function(idx, elem) {
          new Stopwatch(elem, options);
        });
    };
})(jQuery);

$(document).on("pagecreate","#page1", function(){ 
    $(".stopwatch").stopwatch();
});

DEMO

Firstly, don't decorate links by placing them in blockquotes. Secondly, you should post the code you've changed in the answer and link to the JSFiddle demo if you still feel that's necessary, otherwise this answer will be meaningless if JSFiddle goes offline. — James Donnelly, Dec 04 '15 at 16:26
This is great thanks I've got it work on my page now, I'm attempting to put the timer into a text box to make it look better. it works if I use: but not if I use (which I want to): — ghost3h, Dec 06 '15 at 22:39
@user3346481, change the render function to use val() instead of text(): http://jsfiddle.net/ezanker/re71o98o/6/ — ezanker, Dec 06 '15 at 23:35

Jquery Mobile stopwatch

1 Answers1