Q:

Timer not running normally - Javascript

I am sorry for asking this question.  I am relatively new to Javascript.  I got help in building a countdown timer but suddenly it runs in twos.  What could I be doing wrong?  I think I am missing one tiny detail but I just can't find it.  What could be wrong please. 

    $("#coinbtn1").click(function() {
      var fiveMinutes = 60 * 5,
        display = document.querySelector('#time1');
      startTimer1(fiveMinutes, display);
    });
    
    function startTimer1(duration, display) {
      var timer = duration,
        minutes, seconds;
        
      var intervalFn = function() {
       
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);
    
        minutes = minutes < 10 ? " 0" + minutes : minutes;
        seconds = seconds < 10 ? " 0" + seconds : seconds;
    
        display.textContent = minutes + ":" + seconds;
     
     if(--timer ! = 0){
      document.getElementById('coinbtn1').disabled = true;
     }
     
     if (--timer === 0) {
        clearInterval(myVar);
        document.getElementById('coinbtn1').disabled = false;
      }
        
      };
      
      myVar = setInterval(intervalFn, 1000);
      
      intervalFn();
      

    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mdl-card__actions mdl-card--border">
          <div>Timer : <span  id="time1">05:00</span></div>
                                <div class="mdl-grid">
           
           <div class="mdl-layout-spacer"></div>
           
                                    <button id="coinbtn1" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--raised mdl-button--colored">
           50 coins 
           </button>
           <div class="mdl-layout-spacer"></div>
                                </div>
           
                            </div>

Please help. 

A:

The issue is that you have two if statements that use --timer in their conditions.  
--timer will cause timer to decrease regardless of the whether the if condition is true or not (-- is the "decrement" operator).  
Instead, just check timer-1 (which doesn't cause timer to be modified) and then manually decrease the timer just once after both those tests.  

$("#coinbtn1").click(function() {
  var fiveMinutes = 60 * 5,
  display = document.querySelector('#time1');
  startTimer1(fiveMinutes, display);
});
    
function startTimer1(duration, display) {
  var timer = duration, minutes, seconds;
  var intervalFn = function() {
       
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);
    
    minutes = minutes < 10 ? " 0" + minutes : minutes;
    seconds = seconds < 10 ? " 0" + seconds : seconds;
    
    display.textContent = minutes + ":" + seconds;
     
    // Don't decrease the timer in the test
    if(timer-1 ! = 0){
      document.getElementById('coinbtn1').disabled = true;
    }
     
    // Don't decrease the timer in the test      
    if (timer-1 === 0) {
      clearInterval(myVar);
      document.getElementById('coinbtn1').disabled = false;
    }
  
    --timer; // Decrease the counter just once. 
  }
 
  myVar = setInterval(intervalFn, 900);
      
  intervalFn();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mdl-card__actions mdl-card--border">
  <div>Timer : <span  id="time1">05:00</span></div>
  <div class="mdl-grid">      
    <div class="mdl-layout-spacer"></div>     
    <button id="coinbtn1" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--raised mdl-button--colored">50 coins</button>
    <div class="mdl-layout-spacer"></div>
  </div>
</div>

