Question

我想像这样计算它们的总和：

代码段不起作用，因此我已经实现了完整的代码。您可以直接复制并粘贴以进行检查。

         var checkSum=0;
         var sumData  = [];
         //first row total calcualtion
            $(".txt").each(function() {

                $(this).keyup(function(){

                    calculateSum();
                });
            }); 

            function calculateSum() {

                var sum = 0;
                //iterate through each textboxes and add the values
                $(".txt").each(function() {

                    //add only if the value is number
                    if(!isNaN(this.value) && this.value.length!=0) {
                        sum += parseFloat(this.value);

                    }

                });
                //.toFixed() method will roundoff the final sum to 2 decimal places
                $("#sum").html(sum);
                checkSum += sum;
                sumData.push(sum);
            }

            //2nd row calculation
                $(".txt1").each(function() {

                $(this).keyup(function(){

                    calculateSum1();
                });
            }); 

            function calculateSum1() {

                var sum1 = 0;
                //iterate through each textboxes and add the values
                $(".txt1").each(function() {

                    //add only if the value is number
                    if(!isNaN(this.value) && this.value.length!=0) {
                        sum1+= parseFloat(this.value);

                    }

                });
                //.toFixed() method will roundoff the final sum to 2 decimal places
                $("#sum1").html(sum1);
                checkSum += sum1;
                sumData.push(sum1);
            }

            //3rd row calculation
            $(".txt2").each(function() {

                $(this).keyup(function(){

                    calculateSum2();
                });
            }); 

            function calculateSum2() {

                var sum2 = 0;
                //iterate through each textboxes and add the values
                $(".txt2").each(function() {

                    //add only if the value is number
                    if(!isNaN(this.value) && this.value.length!=0) {
                        sum2+= parseFloat(this.value);

                    }

                });
                //.toFixed() method will roundoff the final sum to 2 decimal places
                $("#sum2").html(sum2);
                sumData.push(sum2);
                checkSum += sum2;
                console.log(checkSum);
            }

<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class="col-md-2">
         <input type="number" class="form-control txt" id="customAmount" name="customReason" min="0">
      </div>
      <div class="col-md-2">
         <input type="number" class="form-control txt" id="customPenalty" name="customPenalty" min="0">
      </div>
      <div class="col-md-1">
         <span id="sum">0</span>
      </div>
      <div class="col-md-2">
         <input type="text" class="form-control txt1" id="vatAmount" name="vatAmount" min="0">
      </div>
      <div class="col-md-2">
         <input type="text" class="form-control txt1" id="vatPenalty" name="vatPenalty" min="0">
      </div>
      <div class="col-md-1">
         <span id="sum1">0</span>
      </div>
      <div class="col-md-2">
         <input type="text" class="form-control txt2" id="exciseAmount" name="exciseAmount" min="0">
      </div>
      <div class="col-md-2">
         <input type="text" class="form-control txt2" id="excisePenalty" name="excisePenalty" min="0">
      </div>
      <div class="col-md-1">
         <span id="sum2">3</span>
      </div>                           
   </body>
</html>

我试图将sum添加到 checkSum 变量中，但显示出这种错误。如果更改输入字段中的值或单击退格键，如何减少总数？

Answer 1

将总和加在一起时，您正在关闭总和的预览状态，而是应该考虑在更改输入时重新计算所有总和。

modelId

<ul>
  <li key=1> Some Make X</li>
  <li key=2> Some Make Y</li>
</ul>


<ul>
  <li key=34> Some Model X</li>
  <li key=2> Some Model Y</li>
</ul>

Answer 2

由于设计错误，您将获得不正确的行为，并且与多个输入字段无关。您可以通过仅保留两个输入字段并记录checkSum的值来进行检查。

根本原因是checkSum += sum;行，每次更改输入对中的一个输入字段时，该行将继续附加两个相似字段的总和（例如，两个带有class =“ txt”的输入）。错了

要从所有六个输入字段中获取正确的最终总计，必须删除行checkSum += sum; , checkSum += sum1;, checkSum += sum2;，并从calculateSum / calculateSum1 / calculateSum2方法中调用专用函数，该方法只需将sum, sum1 and sum2中的值相加跨越并返回它。

Answer 3

checkSum += sum;不能按您预期的方式工作。如果调用一次，则添加该值，但是第二次调用时，将添加两个输入的 sum 而不是第二个输入的值

因此，如果您从1开始，然后在第二个框中输入2，则总和为3，这很好。但是，由于您在checkSum中已有1，因此要添加1 + 3，这不是您想要的。

我知道您已经接受了答案，我只是想您可能想知道为什么您的代码未按预期的方式工作。

计算javascript中的值总计未给出正确的结果

3 个答案: