如何用逗号计算金额

Question

I have a product that cost 1,500.85 and i want to multiply it with the quantity input using javascript. But because the amount is over a thousand there is a comma and because of that comma the result shown "NaN" .. How do i calculate the amount with the comma?

NOTE: It works if the amount is under a thousand.

 // Calculation script START $(document).ready(function() { CalculateTotalPrice(); }); document.getElementsByClassName("input-text qty text")[0].onkeyup = function() {CalculateTotalPrice()}; $(select).onchange(function() { CalculateTotalPrice(); }); function CalculateTotalPrice() { setTimeout(function(){ var price = document.querySelector(".price .woocommerce-Price-amount.amount").innerText; var quantity = document.getElementsByClassName("input-text qty text")[0].value; var total = price * quantity; var totalOnly2Decimal = total.toFixed(2); document.getElementById("result").innerHTML = "DKK " + totalOnly2Decimal + " inkl. moms"; }, 100); } // Calculation script END 

 <!-- Price --> <div class="elementor-widget-container"> <p class="price">Fra: <span class="woocommerce-Price-amount amount"> <span class="woocommerce-Price-currencySymbol"></span>1,122.50 </span> kr. inkl. moms</p> </div> <!-- Quantity field --> <div class="quantity"> <label class="screen-reader-text" for="quantity_5cd3fab7bb0d7"></label> <input type="number" id="quantity_5cd3fab7bb0d7" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="Stk." size="4" inputmode=""> <!-- Result --> <h3 style="font-size: 17px; font-weight:bold; display:inline; text-transform:uppercase;">Total:</h3> <p class="result" id="result" style="display:inline;"></p> 

Answer 1

Replace all the commas using String.prototype.replace then multiply.

 let price = '1,500.85'; let quantity = '7'; let total = price.trim().replace(/,/g, '') * quantity; console.log(total) 

Answer 2

You can remove the comma with the replace method on the String object and convert to integer

price = parseInt(price.replace(/,/g,''))
var total = price * quantity;

Answer 3

Change this line to the following

var price = 
document.querySelector(".price .woocommerce-Price-amount.amount").innerText.split(",").join("");

 // Calculation script START $(document).ready(function() { CalculateTotalPrice(); }); document.getElementsByClassName("input-text qty text")[0].onkeyup = function() { CalculateTotalPrice() }; function CalculateTotalPrice() { setTimeout(function() { var price = document.querySelector(".price .woocommerce-Price-amount.amount").innerText.split(",").join(""); var quantity = document.getElementsByClassName("input-text qty text")[0].value; var total = price * quantity; var totalOnly2Decimal = total.toFixed(2); document.getElementById("result").innerHTML = "DKK " + totalOnly2Decimal + " inkl. moms"; }, 100); } // Calculation script END 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Price --> <div class="elementor-widget-container"> <p class="price">Fra: <span class="woocommerce-Price-amount amount"> <span class="woocommerce-Price-currencySymbol"></span>1,122.50 </span> kr. inkl. moms</p> </div> <!-- Quantity field --> <div class="quantity"> <label class="screen-reader-text" for="quantity_5cd3fab7bb0d7"></label> <input type="number" id="quantity_5cd3fab7bb0d7" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="Stk." size="4" inputmode=""> <!-- Result --> <h3 style="font-size: 17px; font-weight:bold; display:inline; text-transform:uppercase;">Total:</h3> <p class="result" id="result" style="display:inline;"></p> <script> </script> 

Answer 4

There seemed to be a couple of errors with your snippet that i've done my best to fixup below. To answer your question, there are two main points:

1. var priceAsFloat = parseFloat(price.replace(/,/g, ''));

Remove the comma from the price and then convert it to a float before doing any maths with it

2. var result = totalOnly2Decimal.toString().replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,')

Convert the result back to a string and use the above regex to put commas back in at the desired points.

Working example:

 // Calculation script START $(document).ready(function() { CalculateTotalPrice(); }); document.getElementsByClassName("input-text qty text")[0].onkeyup = function() {CalculateTotalPrice()}; $("input").change(function() { CalculateTotalPrice(); }); function CalculateTotalPrice() { setTimeout(function(){ var price = document.querySelector(".price .woocommerce-Price-amount.amount").innerText; var priceWithoutCommas = price.replace(/,/g, ''); var quantity = document.getElementsByClassName("input-text qty text")[0].value; var total = priceWithoutCommas * quantity; var totalOnly2Decimal = total.toFixed(2); var result = totalOnly2Decimal.toString().replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1,') document.getElementById("result").innerHTML = "DKK " + result + " inkl. moms"; }, 100); } // Calculation script END 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Price --> <div class="elementor-widget-container"> <p class="price">Fra: <span class="woocommerce-Price-amount amount"> <span class="woocommerce-Price-currencySymbol"></span>1,122.50 </span> kr. inkl. moms</p> </div> <!-- Quantity field --> <div class="quantity"> <label class="screen-reader-text" for="quantity_5cd3fab7bb0d7"></label> <input type="number" id="quantity_5cd3fab7bb0d7" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="Stk." size="4" inputmode=""> <!-- Result --> <h3 style="font-size: 17px; font-weight:bold; display:inline; text-transform:uppercase;">Total:</h3> <p class="result" id="result" style="display:inline;"></p>