0

o objetivo é obter os subtotais em cada linha e o totalPedido. Está acontecendo isso parcialmente. Duas coisas mim incomodando: 1 - mesmo mostrando o resultado nos subtotais, no log fica exibindo a mensagem :create:236 Uncaught TypeError: Cannot read property 'value' of undefined at subtotalizar (create:236)"

2 - O totalPedido somente é calculado quando é o último item da iteração. E não soma, apenas concatena. Se eu coloco ParseInt( .. não calcula e nem soma.

gostaria da ajuda para resolver esses problemas, ou seja: 1 - Calcular os subtotais sem exibir essa mensagem de erro no log 2 - calcular o totalPedido sendo a soma de todos eles.

Segue o blade:

  <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>

Agradeço desde já.

1 Resposta 1

0

1. Calcular os subtotais sem exibir essa mensagem de erro no log

Este erro no log está ocorrendo porque você está fazendo ele percorrer mais itens do array do que deveria, por exemplo, se existirem 11 itens na sua tabela, o loop irá tentar percorrer 12. Pra resolver isso é só trocar a condição do loop de <= para <.

A linha do for deveria ficar assim: for (var i=0; i < itensvlr.length; i++){

2. Calcular o totalPedido sendo a soma de todos eles.

A soma do total não está ocorrendo porque, muito embora você esteja usando o parseInt, o valor de totalP.value é uma string por ser o campo do html. Para contornar isso é possível utilizar uma variável acima do loop contendo a soma atual.

Com isso o código final deveria se parecer com isso:

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

OBS: Coloquei também uma função para facilitar o cálculo com o valor ou a quantidade em decimal

1
  • Muito obrigado pelos esclarecimentos.
    – Iram Faria
    16/06/2020 às 12:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .