Put multiplication result in another input and add Totals

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

When you use onkeyup="ValidaValor(this, <?php echo $lp[" quantidade "]; ?>);" you are preventing the value of the quantity from changing, ie the second argument of that function never changes, even if the input changes.

I suggest another approach:

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

quant.addEventListener('input', function() {
  total.value = Number(preco.value) * Number(quant.value);
});

<input type="hidden" id="preco" name="preco[]" value="50" />
<input type="number" name="quant[]" id="quant" class="form-control prc " min="1" max="10" step="1">
<input type="text" name="total[]" id="total[]" class="form-control" value="0">

If you have multiple rows of a table with these inputs you cannot use repeated Ids. In this case you could do something like this:

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

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 = Number(preco.value) * Number(quant.value);
});

<table>
  <thead>
    <tr>
      <th></th>
      <th>Quantidade</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="hidden" name="preco[]" value="50" />
      </td>
      <td><input type="number" name="quant[]" class="form-control prc " min="1" max="10" step="1"></td>
      <td><input type="text" name="total[]" class="form-control" value="0"></td>
    </tr>
    <tr>
      <td><input type="hidden" name="preco[]" value="50" />
      </td>
      <td><input type="number" name="quant[]" class="form-control prc " min="1" max="10" step="1"></td>
      <td><input type="text" name="total[]" class="form-control" value="0"></td>
    </tr>
    <tr>
      <td><input type="hidden" name="preco[]" value="50" />
      </td>
      <td><input type="number" name="quant[]" class="form-control prc " min="1" max="10" step="1"></td>
      <td><input type="text" name="total[]" class="form-control" value="0"></td>
    </tr>

  </tbody>
</table>