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;
}

Answer 1

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