общий результат вычисления javascript становится двойным

#javascript #jquery

#javascript #jquery

Вопрос:

Я пытаюсь разработать простой бухгалтерский калькулятор.

Возможно, word calculator был бы более обширным в соответствии с характером моего проекта. На самом деле это простое вычисление транзакции.

Первое падение, с которым он имеет дело

количество элементов

элемент 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 amp;amp; 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) amp;amp; 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 amp;amp; 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) amp;amp; 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) amp;amp; 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:

Хорошо, вот мое объяснение. Есть несколько логических недостатков, о которых мы должны позаботиться в первую очередь.

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 amp;amp; 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) amp;amp; 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 amp;amp; 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) amp;amp; 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) amp;amp; 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) amp;amp; 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;
      }
  }
}