javascript计算总结果翻倍

时间:2019-04-22 20:35:38

标签: javascript jquery

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

根据我的项目性质,也许单词计算器会更广泛。实际上,这是简单的交易计算。

它首先处理秋天

  

项目率

     

项目qnt

     

每个项目的总金额(rate * qnt)

我做到了,现在amnt的所有行都应为求和,并将结果设置为总计,条件为-要求。确实,我无法应付这种情况。

条件可以

  

折扣

     

总项目总和用户可以应用折扣(+)税(%)损失(-),无论他希望如何,我也可以得到这些条件的结果,但是在合并结果或获得总计时,它变得一团糟,总计中的输出是随机产生的。

例如,用户购买了

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>

1 个答案:

答案 0 :(得分:0)

好的,这是我的解释。 首先要解决一些逻辑缺陷。

1)您正在使用相同的功能来计算折扣和税额。折扣需要从未加的总和中减去。 Hece,我将折扣值乘以-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;
      }
  }
}