Кнопка Start/Stop на JQuery

var btn = document.querySelector('#start'); 
 
btn.addEventListener('click', function() { 
  btn.value = (btn.value == 'Start' ? 'Stop' : 'Start'); 
})

<input type="button" id="start" value="Start" />

$("#start").click(function(){       
   var v = $(this).val(); 
    
   switch(v){ 
      case 'start': v = 'stop';  break; 
      case 'stop':  v = 'start'; break; 
   } 
    
   $(this).val(v);       
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="button" id="start" value="start"/>

$("#btn1").click(function(){ 
   var msgs = ['stop', 'start']; 
   var v = $(this).val(); 
   $(this).val( msgs[ +(v == 'stop') ] ); 
}); 
 
$("#btn2").click(function(){ 
   var cfg = { stop: 'start', start: 'stop' }; 
   var v = $(this).val(); 
   $(this).val( cfg[v]); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="button" id="btn1" value="start"/> 
<input type="button" id="btn2" value="start"/>

function Toggle(values) { 
  //сырой массив 
  this.raw = values; 
  //текущий индекс 
  this.head = 0; 
  //итератор 
  this.iter = function() { 
     this.head = (this.head < this.raw.length - 1) ? this.head + 1 : 0; 
  } 
  //получить текущее значение массива 
  this.getCurrent = function () { 
     return this.raw[this.head]; 
  } 
} 
 
 
window.onload = function () { 
   
  //объявление 
  var tog = new Toggle(["start","stop"]); 
  //добавление элемента, это можно было сделать при инициалиации но здесь оно нужно для наглядности 
  tog.raw.push("pause"); 
   
   
  var bind = document.getElementById("bind"); 
  bind.value = tog.getCurrent(); 
  bind.addEventListener("click", function() { 
    //итерируемся 
    tog.iter(); 
    bind.value = tog.getCurrent(); 
  }); 
}

<input type="submit" value="" id="bind">