javascript - 获得第一次总计很好，但更改折扣或数量时会给出不正确的结果

Question

• 当数量或折扣发生变化时，获取商品总价就可以了（在两个输入字段中都定义了calculateItemTotal()
  函数以捕获该值并基于该函数为我提供商品总价）
• 根据添加的行数，项目总计计算工作正常，并添加所有项目总计并显示在总计文本字段中
• 第一次将所有项目总计的总和获得正确的总文本字段值。
• 获得总值后，如果我更改了数量或折扣字段 总文本字段给我的值不正确。

---

html页面总文本字段标记

<label class="control-label col-xs-5">Total: </label>
  <div class="col-xs-6">
    <input type="text" name="totalprice" id="finaltotalprice" class="form-control" disabled> <!-- final total value is here -->
  </div>

---

用于动态添加行的 JavaScript/jQuery 函数

执行这段代码没有错误

// dynamically changing the row id for table rows
let rowId = 0;

$("#soid").change(function() {
 $.get("../ajax/ajax_product.php?type=get_sales_order_list", {salesOrderId: $("#soid").val()} , function (data) {
  if(data) {
     console.log(data);
     let orderItems = JSON.parse(data);
     console.log(orderItems);
     $("#sales_item_list").html('');

      for(let list in orderItems) {
          $("#sales_item_list").append("<tr>" + 
          "<td><input type='text' name='quantity[]' class='form-control' id='quantity_"+ rowId +"' value='"+ orderItems[list].sales_list_item_quantity +"' onchange='calculateItemTotal("+ rowId +")' ></td>"+ 
          "<td><input type='hidden' name='unitprice[]' id='unitprice_"+ rowId +"' class='form-control' value='"+ orderItems[list].unit_price +"' readonly>"+ orderItems[list].unit_price +"</td>" + 
          "<td><input type='text' name='discount[]' class='form-control'  id='discount_"+ rowId +"' onchange='calculateItemTotal("+ rowId +")'></td>" + 
          "<td><input type='text' name='itemtotalprice[]' class='form-control' id='itemtot_"+ rowId +"' ></td>"  + 
          "</tr>");
   rowId++;
                }
            }

        });
    });

---

calculateItemTotal() 函数

    let finalTot = 0;
    function calculateItemTotal(data) {
        let quantity = parseInt($("#quantity_"+data).val()); // take the quantity value to quantity variable -- ok
        if(isNaN(quantity)) quantity = 0; // make it 0 if it is not a number

        let unitPrice = parseFloat($("#unitprice_"+data).val()); // take the unit price value to the unit price variable --ok
        if(isNaN(unitPrice)) unitPrice = 0.00;

        let tot = quantity * unitPrice; // calculation is ok
        let discount = (parseFloat($("#discount_"+data).val())/100 * tot).toFixed(2); // calculation is ok
        if(isNaN(discount)) discount = 0.00;

        let net_total = tot - discount; // this is also ok

        let with2Decimals = parseFloat(net_total).toFixed(2); // this is also ok

        $("#itemtot_"+data).val(with2Decimals); // set the calculated price of product item -- ok

        // this is also ok
        let convertToNumber = parseFloat($("#itemtot_"+data).val());

        putFinalTotal(convertToNumber); // calling for the function to set the final total, -- ok
    }
    
    
function putFinalTotal(convertToNumber) {
   finalTot = finalTot + convertToNumber;
   console.log(typeof(finalTot));
   $("#finaltotalprice").val(finalTot.toFixed(2)); // set the total value to the "total" text field
}

---

第一次计算

正确添加项目总计

---

每当我更改数量或折扣时，总价值给我的价值不正确

例如：- 我将数量从 10 更改为 100，给了我正确的项目总数但不正确的总值

正确答案应该是 14400 但给我 15600

可以请有人能给我见解，如何解决这个问题。

标签： javascriptjquery

Answer 1

您需要在新总和之前减去项目总价，因为它的当前值保存在finalTot中。

尝试：

let finalTot = 0;

function calculateItemTotal( data ) {
    const rowTotalElement = $( '#itemtot_' + data );
    const currentRowTotal = parseFloat( rowTotalElement.val() );
    if ( !isNaN( currentRowTotal ) ) {
        finalTot -= currentRowTotal;
    }

    let quantity = parseInt( $( '#quantity_' + data ).val() ); // take the quantity value to quantity variable -- ok
    if ( isNaN( quantity ) ) {
        quantity = 0;
    } // make it 0 if it is not a number

    let unitPrice = parseFloat( $( '#unitprice_' + data ).val() ); // take the unit price value to the unit price variable --ok
    if ( isNaN( unitPrice ) ) {
        unitPrice = 0.00;
    }

    let tot = quantity * unitPrice; // calculation is ok
    let discount = (parseFloat( $( '#discount_' + data ).val() ) / 100 * tot).toFixed( 2 ); // calculation is ok
    if ( isNaN( discount ) ) {
        discount = 0.00;
    }

    let net_total = tot - discount; // this is also ok

    let with2Decimals = parseFloat( net_total ).toFixed( 2 ); // this is also ok

    rowTotalElement.val( with2Decimals ); // set the calculated price of product item -- ok

    // this is also ok
    let convertToNumber = parseFloat( rowTotalElement.val() );

    putFinalTotal( convertToNumber ); // calling for the function to set the final total, -- ok
}