Calculate the total value of an order with jQuery

Question

Calculate the total value of an order with jQuery

Navigation

#1 by (2 votes)

0

I'm new to jQuery and wanted to do a simple sum operation, however as I'm learning the syntax I still have difficulties.

I was able to generate the total value of the requests, however, I can not generate total value: the rate has the fixed value, so the value of the total is equal to the rate plus the value of the request. I have done simple summing algorithms using variables, however they return me 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><formaction="#">
  <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>

javascript jquery

asked by anonymous 06.05.2017 / 23:00

1 answer

Is it a bad practice to create a CSS file for each screen? [closed] Modify a LinkedList using another LinkedList

score 2 · Accepted Answer

Just put $("#tot").text('R$'+(parseFloat(valorTotal+5).toFixed(2))); in the 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><formaction="#">
  <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>