Estoy tratando de devolver la suma de los valores de entrada en tiempo real, pero solo suma el valor total y no suma los centavos. Me gustaría agregar los centavos también, ¿qué puedo hacer?
Actualmente, el script devuelve algo como: 100.00
Pero se suponía que regresaría: 100.85
Creo que es algo simple de resolver, pero soy nuevo en JavaScript.
Aquí está mi código:
$('.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>La aritmética de enteros redondea hacia abajo. Utilice parseFloat en su lugar. Hice algunos cambios en su código aquí está la demostración de trabajo.
<!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>