Sum input fields in Table

Question

My goal is to display the sum of Inputs in the Total Column in the "Total Order" input, where the Acrescimo (will be passed in decimal form (%)) and the discount value (will be passed in decimal form(%)).

I tried to follow the logic of the javascript presented using addeventlistener and parentElement but did not succeed.

I count on your support.

Below is the javascript

window.onload = function () {

    var preco = document.getElementById('preco');
    var quant = document.getElementById('quant');
    var total = document.getElementById('total[]');
    var table = document.getElementById('tb_vendas');


    /**/
    function getMoney( str )
    {
            return parseInt( str.replace(/[\D]+/g,'') );
    }
    function formatReal( int )
    {
            var tmp = int+'';
            tmp = tmp.replace(/([0-9]{2})$/g, ",$1");
            if( tmp.length > 6 )
                    tmp = tmp.replace(/([0-9]{3}),([0-9]{2}$)/g, ".$1,$2");

            return tmp;
    }
    /**/
    table.addEventListener('input', function(e) {
      var quant = e.target.matches('[name="quant[]"]') && e.target;
      var tr = quant.parentElement;
      while (tr = tr.parentElement) {
        if (tr.matches('tr')) break;
      }
      var preco = tr.querySelector('[name="preco[]"]');
      var total = tr.querySelector('[name="total[]"]');
      total.value = formatReal(Number(preco.value) * Number(quant.value)*100);
    });
}

Now follow the html

<form action="salvar_venda.php" name="form_venda">
<label>Acrescimo(%):</label>
<input name="acrescimo" id="acrescimo" type="text" />
<br/><br/>
<label>Desconto(%):</label>
<input name="desconto" id="desconto" type="text" />
<br/><br/>
<label>Total do Pedido(Soma dos totais da tabela+acrescimo(%)-desconto(%))</label>
<input name="desconto" id="desconto" type="text" />
<br/><br/>
<table width="200" border="1" id="tb_vendas" name="tb_vendas">
  <tr>
    <td>PRODUTO</td>
    <td>VALOR</td>
    <td>QUANTIDADE</td>
    <td>TOTAL</td>
  </tr>
  <tr>
    <td>produto 01 </td>
    <td>
        123,00
        <input type="hidden" value='<?php echo $lp["precodevenda"]; ?>' name="preco[]" id="preco" >
    </td>
    <td><input type="number"  class="form-control" name="quant[]" id="quant" onkeyup="ValidaValor(this, <?php echo $lp["quantidade"]; ?>);" min="1" max="<?php echo  $lp["quantidade"]; ?>"  step="1"></td>
    <td><input type="text" class="form-control calcular"   readonly="readonly"  name="total[]" id="total" ></td>
  </tr>
  <tr>
    <td>produto 02</td>
     <td>
        456,00
        <input type="hidden" value='<?php echo $lp["precodevenda"]; ?>' name="preco[]" id="preco" >
    </td>
    <td><input type="number"  class="form-control" name="quant[]" id="quant" onkeyup="ValidaValor(this, <?php echo $lp["quantidade"]; ?>);" min="1" max="<?php echo  $lp["quantidade"]; ?>"  step="1"></td>
    <td><input type="text" class="form-control calcular"   readonly="readonly"  name="total[]" id="total" ></td>
  </tr>
  <tr>
    <td>produto 03</td>
     <td>
        356,00
        <input type="hidden" value='<?php echo $lp["precodevenda"]; ?>' name="preco[]" id="preco" >
    </td>
    <td><input type="number"  class="form-control" name="quant[]" id="quant" onkeyup="ValidaValor(this, <?php echo $lp["quantidade"]; ?>);" min="1" max="<?php echo  $lp["quantidade"]; ?>"  step="1"></td>
    <td><input type="text" class="form-control calcular"   readonly="readonly"  name="total[]" id="total" ></td>
  </tr>
  <tr>
    <td>produto 04</td>
     <td>
        322,00
        <input type="hidden" value='<?php echo $lp["precodevenda"]; ?>' name="preco[]" id="preco" >
    </td>
    <td><input type="number"  class="form-control" name="quant[]" id="quant" onkeyup="ValidaValor(this, <?php echo $lp["quantidade"]; ?>);" min="1" max="<?php echo  $lp["quantidade"]; ?>"  step="1"></td>
    <td><input type="text" class="form-control calcular"   readonly="readonly"  name="total[]" id="total" ></td>
  </tr>
</table>
</form>

Answer 1

To calculate that you can do so:

var form = document.querySelector('[name="form_venda"]');
var acrescimo = form.querySelector('[name="acrescimo"]');
var desconto = form.querySelector('[name="desconto"]');
var subTotais = form.querySelectorAll('[name="total"]');

var total = 0;
for (var i = 0; i < subTotais.length; i++) {
  total += Number(subTotais[i].value.replace(/\./g, '').replace(',', '.'));
}
alert(total);

And now just apply the percentage of accretion and discount, that you can pick up each one with Number(acrescimo.value) for example.