If-else statement causing problems with buttons

Question

Update #1 - Clarified question, new working link.

Live link: https://s3.amazonaws.com/bsunproduction/auction/index.html

The problem I'm trying to fix lies with if-else statement for my form buttons on the right column of the page. Scroll down past the header and navigation to see the problem in action. The issue occurs when I do the following:

Click one of the form buttons, click a different form button then deselect the second button clicked before countup.js is complete

The end goal

When none of the form buttons are selected, the number under "Your bid will be" should just be a string of three hypens --- to denote no value
Instead, the numbers for .new__amount count down and the HTML becomes the value of the totalAmount, which I do not want to happen.

scripts.js

/*-------------------------------------
    STEP ONE: PLACE BID
    --------------------------------------*/

$.ajax({
  url: "https://sheetsu.com/apis/4a8eceba",
  method: "GET",
  dataType: "json"
}).then(function(spreadsheet) {

  // Print current bid
  var currentBid = parseInt(spreadsheet.result.pop().Bids);
  $(".current__amount").html("$" + currentBid);

  var baseAmount = 0;
  var totalAmount = baseAmount;

  $('.button__form').on('click', function() {
    var value = $(this).val();

    if ($(this).hasClass('is-selected')) {
      $(this).removeClass('is-selected');
      $(".check--one").css("color", "#ccc");
      $(".new__amount").css("margin-left", 10 + "px");
      $(".bids__dollar").addClass("is--hidden");
      totalAmount = parseInt(totalAmount) - parseInt(value);
      console.log("If");
      $('.total__amount').html("---");
    } else {
      $(".button__form").removeClass('is-selected');
      $(this).addClass('is-selected');
      $(".check--one").css("color", "#ffdc00");
      totalAmount = currentBid; // reset the totalAmount to base
      totalAmount = parseInt(totalAmount) + parseInt(value);
      console.log("Else");
      $('.total__amount').html("$" + totalAmount);
      $(".bids__dollar").removeClass("is--hidden");
      $(".new__amount").css("margin-left", 0 + "px");

      /*-------------------------------------
      COUNTUP
      --------------------------------------*/

      $(function() {
        var options = {  
          useEasing: true,
            useGrouping: true,
            separator: '',
            decimal: '',
            prefix: '',
            suffix: ''
        };

        var count = new CountUp("count", 0, totalAmount, 0, 1.5, options);
        count.start();
      });
    }
  });
});

index.html (Just the buttons)


  Step One
  
    
  

  Pick one of the amounts below to add to the current bid.
  
    
    
    
    
    
    
  
  

  
    
      The last bid was
      ---
    

    
      Your bid will be
      $
      ---

Josh Crozier · Accepted Answer

The problem is unrelated to the if/else conditions.

The issue is that the count up plugin is overwriting the text (since it is still being executed after you set the text in the if/else conditions).

According to the CountUp.js documentation, the .start() method accepts a function as a callback, which will be executed when the animation ends.

Therefore, the simplest work-around would be to check if there are any selected button elements in the callback. If there aren't any selected elements, then set the text of .total__amount to ---:

var count = new CountUp("count", 0, totalAmount, 0, 1.5, options);
count.start(function() {
  if ($('.button__form.is-selected').length === 0) {
    $('.total__amount').text("---");
  }
});

Alternatively, you could also create an array of count objects.

In the snippet below, there is a counterArray array which contains each count object.

Inside of your if statement, use the .reset() method on each of the count objects in the array before setting the text of .total__amount to ---:

counterArray.forEach(function (count) {
  if (count && count.reset) {
    count.reset();
  }
});

$('.total__amount').text("---");

Here is the relevant code and a working example here.

_{(Irrelevant code removed for brevity)}

var baseAmount = 0;
var totalAmount = baseAmount;
var counterArray = [];

$('.button__form').on('click', function() {
  if ($(this).hasClass('is-selected')) {
    // ....

    counterArray.forEach(function (count) {
      if (count && count.reset) {
        count.reset();
      }
    });

    $('.total__amount').text("---");
  } else {
    // ....

    $(function() {
      var options = {};
      var count = new CountUp("count", 0, totalAmount, 0, 1.5, options);
      count.start();
      counterArray.push(count);
    });
  }
});