Soy muy nuevo en javascript y creé una calculadora simple que calcula el costo en función de la cantidad con botones +/- que controlan la entrada de cantidad. Funciona como quiero que funcione, pero no sé cómo formatear el resultado del costo con miles de separadores de coma una vez que el costo estimado supera los $1000 con 2 artículos.
En otras palabras, cuando aumenta la cantidad a 2, ¿cómo logra que se imprima como $1400 en lugar de $1400?
Esto es lo que probé a continuación
$(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>Vale, tienes algunos problemas en el código. Está tratando de tratar ap como un elemento de entrada. Estás cerca de obtenerlo, solo necesitas hacer el formato donde configuraste el texto.
$(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>