javascript计算总计结果变成双倍答案

【问题标题】：javascript calculation grand total result become doublejavascript计算总计结果变成双倍
【发布时间】：2019-04-22 20:35:38
【问题描述】：

我正在尝试开发一个简单的会计计算器。

根据我的项目性质，计算器这个词可能会更大。其实就是简单的交易计算。

它处理的第一个秋天

物品价格

项目数量

每个项目的总数量 (rate*qnt)

我做到了，现在所有行 amnt 应该是总和并将结果设置为总计条件 - 要求。确实，我无法处理这种情况。

条件可以

折扣

税

total items的sum，用户可以申请discount(+)，tax(%)， loss(-) 随心所欲，我也可以得到这些条件的结果，但是在合并结果或得到总计时，它变得一团糟，总计的输出是随机的。

例如，用户购买

item    qnt     rate    amnt
pen     1200    2       2400
copy    200     20      4000

Now
13% vat included    + (//user can enter with % sigh, amount would be 492)
200 Discount got    - 200

Grand total should be 6692

我的结果是 8172.16 几乎翻了一番。我更喜欢纯 JavaScript，如果用 Jquery 变得更简单也不错。

window.onload=function(){
  itm_qnt_rte();
  dsc_vat();
}

  function itm_qnt_rte(){
      var rte = document.querySelectorAll('.rte');
      for(var i=0;i<rte.length;i++){
          rte[i].onchange=function(){
              var rate = parseInt(this.value);
              var qnt = parseInt(this.closest('tr').querySelector('.qnt').value);
              if(rate > 0 && qnt >0){
                  var amnt = rate*qnt;
                  this.closest('tr').querySelector('.amnt').value = amnt;
                  var sum = 0;
                  var g_ttl = this.closest('table').querySelectorAll('.amnt');
                  for(k=0;k<g_ttl.length;k++){
                      var value = parseInt(g_ttl[k].value);
                      if (!isNaN(value) && value.length != 0) {
                          sum += parseFloat(value);
                      }
                  this.closest('table').querySelector('.g_ttl').value = sum;
                  }
              }
          }
      }
      var qnt = document.querySelectorAll('.qnt');
      for(var i=0;i<qnt.length;i++){
          qnt[i].onchange=function(){
              var qnt = parseInt(this.value);
              var rte = parseInt(this.closest('tr').querySelector('.rte').value);
              if(rte > 0 && qnt >0){
                  var amnt = rte*qnt;
                  this.closest('tr').querySelector('.amnt').value = amnt;
                  var sum = 0;
                  var g_ttl = this.closest('table').querySelectorAll('.amnt');
                  for(k=0;k<g_ttl.length;k++){
                      var value = parseInt(g_ttl[k].value);
                      if (!isNaN(value) && value.length != 0) {
                          sum += parseFloat(value);
                      }
                  this.closest('table').querySelector('.g_ttl').value = sum;
                  }
              }
          }
      }
  }
  
  function dsc_vat(){
    var dsc_vat = document.querySelectorAll('.dv');
    for(var a=0;a<dsc_vat.length;a++){
        dsc_vat[a].onchange = function(){
        var sum = 0;
        var g_ttl = this.closest('table').querySelectorAll('.amnt');
        for(k=0;k<g_ttl.length;k++){
            var value = parseInt(g_ttl[k].value);
            if (!isNaN(value) && value.length != 0) {
                sum += parseFloat(value);
            }
        }
        var selected = this.closest('table').querySelectorAll('.dv');
        for(var b=0;b<selected.length;b++){
          var value = this.value;
          var gttl = 0;
          if (value !== '') {
            if (value[value.length - 1] === '%') {
              gttl = ((sum * parseInt(value)) / 100);
            }
            if (value[value.length - 1] !== '%') {
              gttl = parseInt(value);
            }
            var n = gttl * 1;
            if (n >= 0) {
            sum = sum + gttl
            } else {
            sum = sum - Math.abs(gttl);
            }
          }
          if (value == '' || value === '0') {
            this.value=0;
          }
          this.closest('tr').querySelector('.dv_amnt').value = gttl;
        }
         this.closest('table').querySelector('.g_ttl').value = sum;
        }
    }
}

.txtcenter{
  text-align:center
}
.txtright{
  text-align:right
}
.g_ttl{
  border:2px solid red;
}
table{
  margin-bottom:50px;
}

<html>
  <head>
  </head>
  <body>
    <table>
      <tr>
        <th>Particulars</th><th>Qnt</th><th>Rate</th><th>amnt</th>
      </tr>
      <tr>
        <td>Pen</td><td><input type='text' class='qnt'></td><td><input type='text' class='rte' /></td>
        <td><input type='text' class='amnt'></td>
      </tr>
      <tr>
        <td>Pencil</td><td><input type='text' class='qnt'></td><td><input type='text' class='rte' /></td>
        <td><input type='text' class='amnt'></td>
      </tr>
      <tr>
        <td colspan='2' class='txtcenter'>Discount</td><td><input type='text' class='dv' /></td><td><input type='text' class='dv_amnt' /></td>
      </tr>
      <tr>
        <td colspan='2' class='txtcenter'>Tax</td><td><input type='text' class='dv' /></td><td><input type='text' class='dv_amnt' /></td>
      </tr>
      <tr><td colspan='3'>Grand Total</td><td><input type='text' class='g_ttl' /></td></tr>
      
    </table>

Table 2
    <table>
      <tr>
        <th>Particulars</th><th>Qnt</th><th>Rate</th><th>amnt</th>
      </tr>
      <tr>
        <td>Pen</td><td><input type='text' class='qnt'></td><td><input type='text' class='rte' /></td>
        <td><input type='text' class='amnt'></td>
      </tr>
      <tr>
        <td>Pencil</td><td><input type='text' class='qnt'></td><td><input type='text' class='rte' /></td>
        <td><input type='text' class='amnt'></td>
      </tr>
      <tr>
        <td colspan='2' class='txtcenter'>Discount</td><td><input type='text' class='dv' /></td><td><input type='text' class='dv_amnt' /></td>
      </tr>
      <tr>
        <td colspan='2' class='txtcenter'>Tax</td><td><input type='text' class='dv' /></td><td><input type='text' class='dv_amnt' /></td>
      </tr>
      <tr><td colspan='3'>Grand Total</td><td><input type='text' class='g_ttl' /></td></tr>
      
    </table>

</body>
</html>

【问题讨论】：

标签： javascript jquery

【解决方案1】：

好的，我的解释就到这里。我们必须首先处理一些逻辑缺陷。

1) 您正在使用相同的函数来计算折扣和税收。并且需要从未添加的总和中减去折扣。因此，我将折扣值乘以 -1。

2) 你得到的总和几乎是两倍的原因是因为你使用类 dv 来计算折扣和税收，因此长度被计算为 2 而不是 1。

3) 我添加了一个单独计算税收的例程，并使用了一个专门用于税收计算的类 'dv_tax'

我假设税款计算是在应用折扣后完成的。注意：对于您的程序，用户需要按顺序输入所有值才能正确计算折扣和税金，即在添加折扣或税金后，如果用户决定更改输入的税率或数量，他必须删除税率和折扣率并再次键入。当任何值发生变化时，您可以使用额外的 onChange 函数重新计算税金和折扣。

HTML

<html>
  <head>
  </head>
  <body>
    <table>
      <tr>
        <th>Particulars</th><th>Qnt</th><th>Rate</th><th>amnt</th>
      </tr>
      <tr>
        <td>Pen</td><td><input type='text' class='qnt'></td><td><input type='text' class='rte' /></td>
        <td><input type='text' class='amnt'></td>
      </tr>
      <tr>
        <td>Pencil</td><td><input type='text' class='qnt'></td><td><input type='text' class='rte' /></td>
        <td><input type='text' class='amnt'></td>
      </tr>
      <tr>
        <td colspan='2' class='txtcenter'>Discount</td><td><input type='text' class='dv' /></td><td><input type='text' class='dv_amnt total_discount' /></td>
      </tr>
      <tr>
        <td colspan='2' class='txtcenter'>Tax</td><td><input type='text' class='dv_tax' /></td><td><input type='text' class='dv_amnt' /></td>
      </tr>
      <tr><td colspan='3'>Grand Total</td><td><input type='text' class='g_ttl' /></td></tr>

    </table>

Table 2
    <table>
      <tr>
        <th>Particulars</th><th>Qnt</th><th>Rate</th><th>amnt</th>
      </tr>
      <tr>
        <td>Pen</td><td><input type='text' class='qnt'></td><td><input type='text' class='rte' /></td>
        <td><input type='text' class='amnt'></td>
      </tr>
      <tr>
        <td>Pencil</td><td><input type='text' class='qnt'></td><td><input type='text' class='rte' /></td>
        <td><input type='text' class='amnt'></td>
      </tr>
      <tr>
        <td colspan='2' class='txtcenter'>Discount</td><td><input type='text' class='dv' /></td><td><input type='text' class='dv_amnt total_discount' /></td>
      </tr>
      <tr>
        <td colspan='2' class='txtcenter'>Tax</td><td><input type='text' class='dv_tax' /></td><td><input type='text' class='dv_amnt' /></td>
      </tr>
      <tr><td colspan='3'>Grand Total</td><td><input type='text' class='g_ttl' /></td></tr>

    </table>

</body>
</html>

Javascript

window.onload=function(){
itm_qnt_rte();
dsc_vat();
tax_vat();
}

function itm_qnt_rte(){
    var rte = document.querySelectorAll('.rte');
    for(var i=0;i<rte.length;i++){
        rte[i].onchange=function(){
            var rate = parseInt(this.value);
            var qnt = parseInt(this.closest('tr').querySelector('.qnt').value);
            if(rate > 0 && qnt >0){
                var amnt = rate*qnt;
                this.closest('tr').querySelector('.amnt').value = amnt;
                var sum = 0;
                var g_ttl = this.closest('table').querySelectorAll('.amnt');
                for(k=0;k<g_ttl.length;k++){
                    var value = parseInt(g_ttl[k].value);
                    if (!isNaN(value) && value.length != 0) {
                        sum += parseFloat(value);
                    }
                this.closest('table').querySelector('.g_ttl').value = sum;
                }
            }
        }
    }
    var qnt = document.querySelectorAll('.qnt');
    for(var i=0;i<qnt.length;i++){
        qnt[i].onchange=function(){
            var qnt = parseInt(this.value);
            var rte = parseInt(this.closest('tr').querySelector('.rte').value);
            if(rte > 0 && qnt >0){
                var amnt = rte*qnt;
                this.closest('tr').querySelector('.amnt').value = amnt;
                var sum = 0;
                var g_ttl = this.closest('table').querySelectorAll('.amnt');
                for(k=0;k<g_ttl.length;k++){
                    var value = parseInt(g_ttl[k].value);
                    if (!isNaN(value) && value.length != 0) {
                        sum += parseFloat(value);
                    }
                this.closest('table').querySelector('.g_ttl').value = sum;
                }
            }
        }
    }
}

function dsc_vat(){
  var dsc_vat = document.querySelectorAll('.dv');
  for(var a=0;a<dsc_vat.length;a++){
      dsc_vat[a].onchange = function(){
      var sum = 0;
      var g_ttl = this.closest('table').querySelectorAll('.amnt');
      for(k=0;k<g_ttl.length;k++){
          var value = parseInt(g_ttl[k].value);
          if (!isNaN(value) && value.length != 0) {
              sum += parseFloat(value);
          }
      }

      var selected = this.closest('table').querySelectorAll('.dv');
      for(var b=0;b<selected.length;b++){
        var value = this.value;
        var gttl = 0;
        if (value !== '') {
          if (value[value.length - 1] === '%') {
            gttl = ((sum * parseInt(value)) / 100);
            gttl = gttl*-1;
          }
          if (value[value.length - 1] !== '%') {
            gttl = parseInt(value);
            gttl = gttl*-1;
          }
          var n = gttl * 1;
          if (n >= 0) {
          sum = sum + gttl
          } else {
          sum = sum - Math.abs(gttl);
          }
        }
        if (value == '' || value === '0') {
          this.value=0;
        }
        this.closest('tr').querySelector('.dv_amnt').value = Math.abs(gttl);
      }
       this.closest('table').querySelector('.g_ttl').value = sum;
      }
  }
}

function tax_vat(){
  var tax_vat = document.querySelectorAll('.dv_tax');
  for(var a=0;a<tax_vat.length;a++){
      tax_vat[a].onchange = function(){
      var sum = 0;
      var g_ttl = this.closest('table').querySelectorAll('.amnt');
      for(k=0;k<g_ttl.length;k++){
          var value = parseInt(g_ttl[k].value);
          if (!isNaN(value) && value.length != 0) {
              sum += parseFloat(value);
          }
      }

      var disc_select = this.closest('table').querySelectorAll('.total_discount');
      sum = sum - disc_select[0].value;

      var selected = this.closest('table').querySelectorAll('.dv_tax');
      for(var b=0;b<selected.length;b++){
        var value = this.value;
        var gttl = 0;
        if (value !== '') {
          if (value[value.length - 1] === '%') {
            gttl = ((sum * parseInt(value)) / 100);
          }
          if (value[value.length - 1] !== '%') {
            gttl = parseInt(value);
          }
          var n = gttl * 1;
          if (n >= 0) {
          sum = sum + gttl
          } else {
          sum = sum - Math.abs(gttl);
          }
        }
        if (value == '' || value === '0') {
          this.value=0;
        }
        this.closest('tr').querySelector('.dv_amnt').value = Math.abs(gttl);
      }
       this.closest('table').querySelector('.g_ttl').value = sum;
      }
  }
}

【讨论】：