如何在 javascript 中添加购物车中的数字并使用小数点后的数字正确显示它们

Question

请帮助我，在 JavaScript 中，如何像在电子商务购物车中一样添加多个数字并正确显示小数点后的数字？如果属性值 data-price 是 2.50，我想在 balance.innerHTML 上将该值显示为 2.50，而不是显示的 2.5。这是我的代码：

  <div class="row">

  <div class="col6">
  2,50$
  <div  onclick="addC(this)" data-price="2.50">
  Add to cart
  </div>
  </div>


  <div class="col6">
  2,40$
 <div onclick="addC(this)" data-price="2.40">
 Add to cart
 </div>
 </div>

 </div>

 <div id="balance" data-price="0">0</div>

function addC(product){

let balance = document.getElementById('balance');

balance.innerHTML = parseFloat(Number(balance.innerHTML).toFixed(2)) + parseFloat(Number(product.getAttribute('data-price')).toFixed(3));

}

在这个方法中，你能告诉我吗，因为我使用的是带小数点的数字，我如何用零显示它们，小数点后两位数。我想将它们显示为 2,50 和 2,40 并对它们求和，但是 DOM:

上的当前输出是 2.5 和 2.4

Answer 1

对最终总和而不是加数使用 toFixed。

(2.4 + 2.5).toFixed(2)  --> yields "3.30"

如何在 javascript 中添加购物车中的数字并使用小数点后的数字正确显示它们

How can I add numbers as in a shopping cart in javascript and display them properly with the numbers after the decimal points

javascript

attributes

numbers

parsefloat

tofixed