最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

jquery - JavaScript: parseFloat calculating incorrectly - Stack Overflow

programmeradmin1浏览0评论

I would like it so that each time a (toppings) checkbox is checked, it updates the price by adding an additional 99 pence. It all works fine, except when the user selects the 3 checkboxes (which is 0.99 * 3) and it displays 2.9699999999999998 instead of 2.97

Any ideas on what's wrong?

HTML:

<label><b>Toppings (99p Each): &nbsp;</b></label><br>
<input type="checkbox" name="onions">Onions</input><br>
<input type="checkbox" name="mushrooms">Mushrooms</input><br>
<input type="checkbox" name="peppers">Peppers</input><br>
<input type="checkbox" name="olives">Olives</input><br>
<input type="checkbox" name="garlic">Garlic</input><br>
<input type="checkbox" name="xtra-cheese">Xtra Cheese</input><br>
<input type="checkbox" name="peperoni">Peperoni</input><br>

JavaScript:

var pizzaCost = 0.00;
var toppingCost = 0.00;

$('input[type=checkbox]').change(function(){
    var checked = $(":checkbox:checked").length;
    var checkedInt = parseFloat(checked, 10);
    var temp = (0.99 * checkedInt);
    toppingCost = parseFloat(temp);
    var total = pizzaCost + toppingCost;
    $("#totalPrice").text(total);
});

I would like it so that each time a (toppings) checkbox is checked, it updates the price by adding an additional 99 pence. It all works fine, except when the user selects the 3 checkboxes (which is 0.99 * 3) and it displays 2.9699999999999998 instead of 2.97

Any ideas on what's wrong?

HTML:

<label><b>Toppings (99p Each): &nbsp;</b></label><br>
<input type="checkbox" name="onions">Onions</input><br>
<input type="checkbox" name="mushrooms">Mushrooms</input><br>
<input type="checkbox" name="peppers">Peppers</input><br>
<input type="checkbox" name="olives">Olives</input><br>
<input type="checkbox" name="garlic">Garlic</input><br>
<input type="checkbox" name="xtra-cheese">Xtra Cheese</input><br>
<input type="checkbox" name="peperoni">Peperoni</input><br>

JavaScript:

var pizzaCost = 0.00;
var toppingCost = 0.00;

$('input[type=checkbox]').change(function(){
    var checked = $(":checkbox:checked").length;
    var checkedInt = parseFloat(checked, 10);
    var temp = (0.99 * checkedInt);
    toppingCost = parseFloat(temp);
    var total = pizzaCost + toppingCost;
    $("#totalPrice").text(total);
});
Share Improve this question asked Dec 2, 2015 at 17:51 SamGSamG 3034 silver badges13 bronze badges 2
  • 1 parseFloat is used to convert a string to a float value. Unlike parseInt, it does not have a 2nd parameter. JavaScript actually does not have different types for ints and floats, they are both the same. So, parseFloat(checked) does nothing. This will actually convert checked to a string then to a float. – gen_Eric Commented Dec 2, 2015 at 17:52
  • See stackoverflow./questions/588004/… – rogerdpack Commented Aug 30, 2019 at 6:21
Add a ment  | 

5 Answers 5

Reset to default 4

parseFloat is used to convert a string to a float value. Unlike parseInt, parseFloat does not have a 2nd parameter.

JavaScript actually does not have different types for ints and floats, they are both the same (and stored internally as floats). The only difference between parseFloat and parseInt is whether the returned number should have a decimal ponent or not.

What you want to use here is toFixed(), parseFloat is not needed here at all. There are no strings that you need to parse.

$('input[type=checkbox]').change(function(){
    var checked = $(":checkbox:checked").length;
    toppingCost = 0.99 * checked;

    var total = pizzaCost + toppingCost;
    $("#totalPrice").text(total.toFixed(2));
});

Floating point numbers are rarely exact. They work by representing a number with the least possible error - a little bit like pression. This is in contrast to Decimal datatypes in some languages which literally do store every number like an integer, even past the decimal.

The longer the float, the more precise it is. Most floats are the 32-bit variant of the IEEE 754 standard which has a 23-bit mantissa (the fractional part or precision), and an 8-bit exponent which essentially moves the "floating" decimal point along the mantissa.

What this means for you is that 2.97 cannot be expressed with floats without a small margin of error. In order to get 2.97, you need to round the result to 2d.p. In JavaScript you can do this with

toppingCost.toFixed(2) 

here is a idea multiply the number with 100 then divide the result by 100: 0.99*100*3/100 https://jsfiddle/qp21bpbs/1/

try: parseFloat(x).toFixed(2) let me know if you need something else.

parseFloat is to parse strings to float values, to get some formated float you should use toFixed, like this:

var pizzaCost = 0.00;
var toppingCost = 0.00;

$('input[type=checkbox]').change(function(){
    var checked = $(":checkbox:checked").length;
    var checkedInt = parseFloat(checked, 10);
    var temp = (0.99 * checkedInt);
    toppingCost = +temp.toFixed(2); // Assuming 2 decimals
    var total = pizzaCost + toppingCost;
    $("#totalPrice").text(total);
});
发布评论

评论列表(0)

  1. 暂无评论