How to format a calculated number result with thousand comma separator

Question

I'm very new to javascript and created a simple calculator that calculates cost based on quantity with +/- buttons controlling the quantity input. It works how I want it to, but I can't figure out how to format the cost result with thousand comma separators once the cost estimate exceeds $1000 with 2 items.

In other words, when you increase quantity to 2, how do you get it to print as $1,400 instead of $1400?

Here's what I tried below

$(document).ready(function() {
  $(".calculator").on("input", ".quantity", function() {
    var price = +$(".price").data("price");
    var quantity = +$(this).val();
    $("#total").text("$" + price * quantity);
  })

  var $buttonPlus = $('.increase-btn');
  var $buttonMin = $('.decrease-btn');
  var $quantity = $('.quantity');
  
/*For plus and minus buttons*/
  $buttonPlus.click(function() {
    $quantity.val(parseInt($quantity.val()) + 1).trigger('input');
  });
  
  $buttonMin.click(function() {
    $quantity.val(Math.max(parseInt($quantity.val()) - 1, 0)).trigger('input');
  });
})

/*For number formatting*/

$(document).on('input', '.total', function() {
    var x = $(this).val();
    $(this).val(x.toString().replace(/,/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ","));
});

.checkout {
  height: 300px;
  width: 400px;
  margin: 20px auto;
}

input {
  text-align: center;
  }

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<div class="calculator">
  <h1 class="title">Estimate Cost</h1>
  <p class="price" data-price="700">$700 per item</p>
  <p class="description">Quantity:</p>
  <button type="button" class="decrease-btn">-</button>
  <input type="text" class="quantity" value="1">
  <button type="button" class="increase-btn">+</button>
  <p class="total">Total: <span id="total">$700</span></p>
</div>

take a look at [this answer](https://stackoverflow.com/a/30106316/16688813) — Tom, Dec 02 '21 at 14:06
You are doing it for the input event, you need to run that same sort of code when you update the value. The input event does not run when you change the value with JavaScript. — epascarello, Dec 02 '21 at 14:08

score 0 · Accepted Answer · answered Dec 02 '21 at 14:18

Okay you have some problems in the code. You are trying to treat a p as an input element. You are close to getting it, you just need to do the formatting where you set the text.

$(document).ready(function() {
  $(".calculator").on("input", ".quantity", function() {
    var price = +$(".price").data("price");
    var quantity = +$(this).val();
    const total = '$' + (price * quantity).toFixed(2).replace(/,\$/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    $("#total").text(total);
  })

  var $buttonPlus = $('.increase-btn');
  var $buttonMin = $('.decrease-btn');
  var $quantity = $('.quantity');

  /*For plus and minus buttons*/
  $buttonPlus.click(function() {
    $quantity.val(parseInt($quantity.val()) + 1).trigger('input');
  });

  $buttonMin.click(function() {
    $quantity.val(Math.max(parseInt($quantity.val()) - 1, 0)).trigger('input');
  });
})

.checkout {
  height: 300px;
  width: 400px;
  margin: 20px auto;
}

input {
  text-align: center;
}

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<div class="calculator">
  <h1 class="title">Estimate Cost</h1>
  <p class="price" data-price="700">$700 per item</p>
  <p class="description">Quantity:</p>
  <button type="button" class="decrease-btn">-</button>
  <input type="text" class="quantity" value="1">
  <button type="button" class="increase-btn">+</button>
  <p class="total">Total: <span id="total">$700</span></p>
</div>

Note: if you do not want the decimals, `toFixed(0)` or `toString()` — epascarello, Dec 02 '21 at 14:20
Oh my goodness — thank you SO SO much. I'm VERY very new to javascript and still learning via trial and error. I really appreciate your help and time! — dungoroos, Dec 02 '21 at 14:23

How to format a calculated number result with thousand comma separator

1 Answers1