Calculate each subtotal of the table lines and also the total Measured, being the dynamic lines, that is, same id

Question

the goal is to get the subtotals in each row and the totalPedido. It’s happening partially. Two things I’m bothering: 1 - even showing the result in the subtotals, the log keeps displaying the message :create:236 Uncaught Typeerror: Cannot read Property 'value' of Undefined at subtotalize (create:236)"

2 - The total is calculated only when it is the last item of the iteration. And not sum, just concatenate. If I put Parseint( .. does not calculate nor sum.

would like the help to solve these problems, namely: 1 - Calculate subtotals without displaying this error message in the log 2 - calculate the total calculated by being the sum of all of them.

Follow the Lade:

  <table class="table">
      <tr>
        <th scope="col">#</th>
        <th scope="col">Produto</th>
        <th scope="col">Preço</th>
        <th scope="col">Quantidade</th>
      </tr>    
    @foreach ($produtosFazenda as $produtos)
    <div class="fazenda">
    <tr>
        <td>
          <input type="hidden" class="produtoid"  name = "produtoid[]" 
            placeholder="{{$produtos->id}}" value="{{$produtos->id}}" aria-label="produto" aria-describedby="basic-addon1" >
        </td>
        <td>
          <p>{{$produtos->descricao}}</p></td>
        <td>
          <input type="Number" class="valor" name="preco[]" readonly
            placeholder="{{$produtos->preco}}" value="{{$produtos->preco}}"  aria-label="preco" aria-describedby="basic-addon1" >
        </td>
        <td>
          <input type="Number" class="quantidade" name="quantidade[]"  
            placeholder="0" aria-label="quantidade"  aria-describedby="basic-addon1" onblur = "subtotalizar()" />
        </td> 
        <td>
          <input type="Number" class="subtotal" id="subtotal" name = "subtotal[]"  readonly 
            placeholder="0" aria-label="subtotal"  aria-describedby="basic-addon1" />
        </td>
  @endforeach
      </tr>
  </table>

  <input type="Number" class="totalPedido" id="totalPedido" name = "totalPedido" value="00" readonly 
  placeholder="0" aria-label="totalPedido"  aria-describedby="basic-addon1" />

@csrf
    <input class ="btn btn-primary" type ="submit" value= "Enviar Pedido">
</form>
      </div>

    function subtotalizar(){
      var itensqtd = document.getElementsByClassName("quantidade");
      var itensvlr = document.getElementsByClassName("valor");
      var itenssubtotal = document.getElementsByClassName("subtotal");
      var totalP = document.getElementById("totalPedido");
          for (var i=0; i<=itensvlr.length; i++){
              itenssubtotal[i].value = parseInt(itensqtd[i].value) * parseInt(itensvlr[i].value); 
              totalP.value += parseInt(itenssubtotal[i].value);
      }
    }
  </script>

Thank you in advance.

Answer 1

1. Calculate subtotals without displaying this error message in the log

This log error is occurring because you are making it go through more items in the array than it should, for example, if there are 11 items in your table, the loop will try to go through 12. To solve this just change the condition of the loop <= for <.

The wall wall should look like this: for (var i=0; i < itensvlr.length; i++){

2. Calculate the total calculated as the sum of all of them.

The sum of the total is not occurring because, although you are using parseint, the value of totalP.value is a string because it is the html field. To circumvent this it is possible to use a variable above the loop containing the current sum.

With this the final code should look like this:

function decimal (valor, casas = 2) {
    return Number(Number(valor).toFixed(casas));
}

function subtotal () {
    var itensqtd = document.getElementsByClassName("quantidade");
    var itensvlr = document.getElementsByClassName("valor");
    var itenssubtotal = document.getElementsByClassName("subtotal");
    var totalP = document.getElementById("total");

    var vTotal = 0;

    for (var i=0; i < itensvlr.length; i++){
        itenssubtotal[i].value = decimal(Number(itensqtd[i].value) * Number(itensvlr[i].value));
        vTotal += decimal(itenssubtotal[i].value);
        totalP.value = total;
    }
}

NOTE: I also put a function to facilitate the calculation with the value or the quantity in decimal