1

Sou novo no jQuery e queria fazer uma operação de soma simples, porém como eu estou aprendendo a sintaxe ainda possuo dificuldades.

Eu consegui gerar o valor total dos pedidos, porém, eu não consigo gerar valor total: a taxa tem o valor fixo, logo valor do total é igual à taxa mais o valor do pedido. Eu fiz algoritmos de soma simples usando variáveis, porém eles me retornam NAN.

$(document).ready(function() {

  $(".pizza-add-sub").append('<div class="plus qty-pizza">+</div><div class="mines qty-pizza">-</div>');
  $(".qty-pizza").on("click", function() {

    var $button = $(this);
    var oldValue = $button.parent().find("input").val();
    if ($button.text() == "+") {
      var newVal = parseFloat(oldValue) + 1;
    } else {
      // Don't allow decrementing below zero
      if (oldValue > 0) {
        var newVal = parseFloat(oldValue) - 1;
      } else {
        newVal = 0;
      }
    }
    $button.parent().find("input").val(newVal);

    var valorTotal = 0;
    var valoresMultiplicar = 0;
    $(".qtdpedidos").each(function() {
      valorTotal += parseFloat($(this).data("preco") * $(this).val());
    })

    $(".item span").each(function() {
      valoresMultiplicar += parseFloat($(this).html());
    })
    $("#resultado").text((valorTotal));


  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#">
  <div class="media-body">
    <div class="menu-tittle"></div>
    <div class="quantity">
      <div class="pizza-add-sub">
        <input data-preco="10.00" type="text" class="qtdpedidos" value="0" />
      </div>
    </div>
    <div class="item" class="pizza-price">
      <span id="pizza" class="pizza">10.00</span>
    </div>
  </div>
  
  <div class="media-body">
    <div class="quantity">
      <div class="pizza-add-sub">
        <input data-preco="10.00" type="text" id="qtdpedidos" class="qtdpedidos" value="0" />
      </div>
    </div>
    <div class="item" class="pizza-price">
      <span id="Span1" class="pizza">10.00</span>
    </div>
  </div>
</form>

<div class="last-liner">
  <p>Valor do Pedido: R$<span id="resultado" class="resultado">0.00</span></p>
  <p>Taxa de Entrega: <span id="txa" class="txa">0.00</span></p>
  <p>Total: <span id="tot" class="tot">00.00</span></p>
</div>

7
  • Primeiro, por quê tem código duplicado? Dentro do fomulário existem dois campos iguais. Deveria ser assim mesmo? E qual parte do código não está funcionando? Não obtive valores NaN aqui.
    – Woss
    Commented 6/05/2017 às 22:04
  • Boa noite Anderson, eu coloquei dois códigos iguais no formulário pra simular o que o php faz, ele pega o valor do input e é gerado dentro de um laço, mas eu preferi copiar os 2 pra ser mais intuitivo a respeito do código eu retirei o algoritimo de soma e só deixei o valor do pedido, como ele tava dando errado eu prefiro que me dêem sugestões de como eu faço pra calcular o valor total, abraço.
    – Harakin
    Commented 6/05/2017 às 22:18
  • Ok, você precisa pegar o valor do input, que é a quantidade, multiplicada pelo valor de data-preco, que é o preço, certo? O que seria a taxa que você cita na pergunta?
    – Woss
    Commented 6/05/2017 às 22:21
  • Exato! a taxa de entrega é o valor fixo, na verdade eu esqueci de colcar um valor pra taxa, no caso é o valor do pedido+taxa = total, o meu problema é fazer esse valor gerar no total.
    – Harakin
    Commented 6/05/2017 às 22:42
  • Seria algo semelhante a isso? jsfiddle.net/dd3Lp0m6
    – Woss
    Commented 6/05/2017 às 22:57

2 Respostas 2

2

É só colocar $("#tot").text('R$'+(parseFloat(valorTotal+5).toFixed(2))); no script

$(document).ready(function() {

  $(".pizza-add-sub").append('<div class="plus qty-pizza">+</div><div class="mines qty-pizza">-</div>');
  $(".qty-pizza").on("click", function() {

    var $button = $(this);
    var oldValue = $button.parent().find("input").val();
    if ($button.text() == "+") {
      var newVal = parseFloat(oldValue) + 1;
    } else {
      // Don't allow decrementing below zero
      if (oldValue > 0) {
        var newVal = parseFloat(oldValue) - 1;
      } else {
        newVal = 0;
      }
    }
    $button.parent().find("input").val(newVal);

    var valorTotal = 0;
    var valoresMultiplicar = 0;
    $(".qtdpedidos").each(function() {
      valorTotal += parseFloat($(this).data("preco") * $(this).val());
    })

    $(".item span").each(function() {
      valoresMultiplicar += parseFloat($(this).html());
    })
    
    if (valorTotal==0){
    	$("#tot").text("");
    	$("#resultado").text('');
    }else{
    	$("#tot").text('R$'+(parseFloat(valorTotal+5).toFixed(2)));
    	$("#resultado").text('R$'+parseFloat(valorTotal).toFixed(2));
    }
    
    


  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<form action="#">
  <div class="media-body">
    <div class="menu-tittle"></div>
    <div class="quantity">
      <div class="pizza-add-sub">
        <input data-preco="10.00" type="text" class="qtdpedidos" value="0" />
      </div>
    </div>
    <div class="item" class="pizza-price">
      <span id="pizza" class="pizza">10.00</span>
    </div>
  </div>
  
  <div class="media-body">
    <div class="quantity">
      <div class="pizza-add-sub">
        <input data-preco="10.00" type="text" id="qtdpedidos" class="qtdpedidos" value="0" />
      </div>
    </div>
    <div class="item" class="pizza-price">
      <span id="Span1" class="pizza">10.00</span>
    </div>
  </div>
</form>

<div class="last-liner">
	<p>Valor do Pedido: <span id="resultado" class="resultado"></span></p>
	<p>Taxa de Entrega: <span id="txa" class="txa">5.00</span></p>
	<p>Total: <span id="tot" class="tot"></span></p>
</div>

0
-2

$(document).ready(function() {

  $(".pizza-add-sub").append('<div class="plus qty-pizza">+</div><div class="mines qty-pizza">-</div>');
  $(".qty-pizza").on("click", function() {

    var $button = $(this);
    var oldValue = $button.parent().find("input").val();
    if ($button.text() == "+") {
      var newVal = parseFloat(oldValue) + 1;
    } else {
      // Don't allow decrementing below zero
      if (oldValue > 0) {
        var newVal = parseFloat(oldValue) - 1;
      } else {
        newVal = 0;
      }
    }
    $button.parent().find("input").val(newVal);

    var valorTotal = 0;
    var valoresMultiplicar = 0;
    $(".qtdpedidos").each(function() {
      valorTotal += parseFloat($(this).data("preco") * $(this).val());
    })

    $(".item span").each(function() {
      valoresMultiplicar += parseFloat($(this).html());
    })
    $("#resultado").text((valorTotal));


  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#">
  <div class="media-body">
    <div class="menu-tittle"></div>
    <div class="quantity">
      <div class="pizza-add-sub">
        <input data-preco="10.00" type="text" class="qtdpedidos" value="0" />
      </div>
    </div>
    <div class="item" class="pizza-price">
      <span id="pizza" class="pizza">10.00</span>
    </div>
  </div>
  
  <div class="media-body">
    <div class="quantity">
      <div class="pizza-add-sub">
        <input data-preco="10.00" type="text" id="qtdpedidos" class="qtdpedidos" value="0" />
      </div>
    </div>
    <div class="item" class="pizza-price">
      <span id="Span1" class="pizza">10.00</span>
    </div>
  </div>
</form>

<div class="last-liner">
  <p>Valor do Pedido: €<span id="resultado" class="resultado">0.00</span></p>
  <p>Taxa de Entrega: <span id="txa" class="txa">0.00</span></p>
  <p>Total: <span id="tot" class="tot">00.00</span></p>
</div>

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 .