未捕获TypeError：(sales_total + sales_vat).toFixed不是函数“

Question

每次我输入一个数量，它总是会给我一个错误：(sales_total + sales_vat).toFixed不是一个函数。你能检查一下我的代码吗？下面是我的完整代码：https://jsfiddle.net/yv6zks1g/1/

谢谢!

$('#sales_qty').keyup(function(){
    var qty = parseFloat($('#sales_qty').val()) || 0;
    var sub_total = parseFloat($('#sales_sub_total').val()) || 0;
    var vat = 0.12;

    var sales_total = $('#sales_total').val((qty * sub_total).toFixed(2)).val();

    var sales_vat = $('#sales_vat').val((sales_total * vat).toFixed(2));

    $('#sales_amount_due').val((sales_total + sales_vat).toFixed(2));
});

Answer 1

问题是因为sales_total是从val()返回的字符串，而sales_vat是jQuery对象。假设后者缺少对val()的调用，但随后会出现与前面的变量相同的问题。

要解决此问题，请在#sales_vat上添加val()调用以将变量设置为字符串，然后在进行#sales_amount_due计算之前将其转换为数字类型。试试这个：

​

$('#sales_qty').keyup(function() {
  var qty = parseFloat($('#sales_qty').val()) || 0;
  var sub_total = parseFloat($('#sales_sub_total').val()) || 0;
  var vat = 0.12;

  var sales_total = $('#sales_total').val((qty * sub_total).toFixed(2)).val();
  var sales_vat = $('#sales_vat').val((sales_total * vat).toFixed(2)).val();

  $('#sales_amount_due').val((+sales_total + +sales_vat).toFixed(2));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Qty: <input type="text" id="sales_qty" /> <br />
Sub total: <input type="text" id="sales_sub_total" value="50" /> <br /><br />

Total: <input type="text" id="sales_total" /> <br />
VAT: <input type="text" id="sales_vat" /> <br /><br />

Due: <input type="text" id="sales_amount_due" value="1.2" /> <br /><br />

​

更好的做法是执行计算并将其存储在变量中，而不是DOM元素中。这样，您就不会浪费时间将值计算为数字，将其存储为字符串，再将其检索为字符串，然后再将其转换回数字。试试这个：

​

$('#sales_qty').keyup(function() {
  var qty = parseFloat($('#sales_qty').val()) || 0;
  var sub_total = parseFloat($('#sales_sub_total').val()) || 0;
  var vat = 0.12;
  
  var sales_total = qty * sub_total;
  var sales_vat = sales_total * vat; 
  var sales_due = sales_total + sales_vat;

  $('#sales_total').val(sales_total.toFixed(2))
  $('#sales_vat').val(sales_vat.toFixed(2));
  $('#sales_amount_due').val(sales_due.toFixed(2));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Qty: <input type="text" id="sales_qty" /> <br />
Sub total: <input type="text" id="sales_sub_total" value="50" /> <br /><br />

Total: <input type="text" id="sales_total" /> <br />
VAT: <input type="text" id="sales_vat" /> <br /><br />

Due: <input type="text" id="sales_amount_due" value="1.2" /> <br /><br />

​