使用 JavaScript 和 jQuery 对 div 中的输入和返回值求和

Question

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目前，脚本返回类似：100.00
But it was supposed to return: 100.85但它应该返回：100.85

I think it's a simple thing to solve, but I'm new to JavaScript.我认为解决这个问题很简单，但我是 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>

Answer 1

Integer arithmetic rounds down.整数算术向下舍入。 Use parseFloat instead.使用 parseFloat 代替。 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>

使用 JavaScript 和 jQuery 对 div 中的输入和返回值求和

问题描述

1 个解决方案

解决方案1
0 2021-10-16 09:17:17

使用 JavaScript 和 jQuery 对 div 中的输入和返回值求和

问题描述

1 个解决方案

解决方案1 0 2021-10-16 09:17:17

解决方案1
0 2021-10-16 09:17:17