Sum input and return values in div with JavaScript and jQuery-CodePudding

I'm trying to return the sum of input values in real time, but it just adds up the whole value and doesn't add up the cents. I would like to add the cents too, what can I do?

Currently, the script returns something like: 100.00
But it was supposed to return: 100.85

I think it's a simple thing to solve, but I'm new to JavaScript.

Here is my code:

$('.cardAccordion').on("change", function() {
  var lts = $(this).find("#lts").val();
  var fuelPrice = $(this).find("#fuelPrice").val();
  var calc = lts * fuelPrice;
  var sum = calc.toLocaleString("pt-BR", {
    style: "currency",
    currency: "BRL"
  });
  
  $(this).find("#ltsValue").val(calc)

  
})


var res = 0.00;

$('#addToCart').click(function() {
  var val = $(this).parents('.cardAccordion').find('#ltsValue').val();

  if(val == 0){
    $("#lts").css({
      borderColor: "#f27474"
    })
  }else{
    
    var qnt = $(this).parents('.fuelCard').find('#qntField').val();

    $(this).parents('.cardAccordion').find('#ltsValue').each(function () {
      res  = ~~$(this).val() * qnt;
    });

    var sum = res.toLocaleString("pt-BR", {
      style: "currency",
      currency: "BRL"
    });

    $("[name=result]").val(res);
    $("h3[name=resultText]").text(sum)
  }
})

<div class="card fuelCard">
    <input type="number" value="1" id="qntField" name="quantity" class="form-control  quantityField" disabled>
    <div class="cardAccordion">
        <input type="hidden" value="6.39" id="fuelPrice" />
        <label>Litros</label>
        <select class="form-control" id="lts">
                      <option value="0">Selecione</option>
                      <option value="5">5 Lts</option>
                      <option value="10">10 Lts</option>
                      <option value="15">15 Lts</option>
                      <option value="20">20 Lts</option>
                    </select>
                    <input type="text" class="form-control" id="ltsValue" value="0" disable />
        <button class="btn" id="addToCart">Adicionar ao carrinho</button>
        <input type="hidden" value="0.00" name="result" />
            <h3 name="resultText">R$ 0,00</h3>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

CodePudding user response：

Integer arithmetic rounds down. Use parseFloat instead. I done some changes to your code here is the working demo.

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>
  <div class="card fuelCard">
    <input type="number" value="1" id="qntField" name="quantity" class="form-control  quantityField" disabled>
    <div class="cardAccordion">
        <input type="hidden" value="6.39" id="fuelPrice" />
        <label>Litros</label>
        <select class="form-control" id="lts">
                      <option value="0">Selecione</option>
                      <option value="5">5 Lts</option>
                      <option value="10">10 Lts</option>
                      <option value="15">15 Lts</option>
                      <option value="20">20 Lts</option>
                    </select>
                    <input type="text" class="form-control" id="ltsValue" value="0" disable />
        <button class="btn" id="addToCart">Adicionar ao carrinho</button>
        <input type="hidden" value="0.00" name="result" />
            <h3 name="resultText">R$ 0,00</h3>
    </div>
</div>
<script>
 $('.cardAccordion').on("change", function() {
  var lts = $(this).find("#lts").val();
  var fuelPrice = $(this).find("#fuelPrice").val();
  var calc = lts * fuelPrice;
  var sum = calc.toLocaleString("pt-BR", {
    style: "currency",
    currency: "BRL"
  });
  
  $(this).find("#ltsValue").val(calc)

  
})


var res = 0.00;

$('#addToCart').click(function() {
  var val = $(this).parents('.cardAccordion').find('#ltsValue').val();

  if(val == 0){
    $("#lts").css({
      borderColor: "#f27474"
    })
  }else{
    
    var qnt = $(this).parents('.fuelCard').find('#qntField').val();

    $(this).parents('.cardAccordion').find('#ltsValue').each(function () {
      res  =  parseFloat($(this).val()) * qnt;
    });

    var sum = res.toLocaleString("pt-BR", {
      style: "currency",
      currency: "BRL"
    });

    $("[name=result]").val(parseFloat(res));
    $("h3[name=resultText]").text(sum)
  }
})
</script>
</body>
</html>