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);
});

• javascript
• jquery
• html

• 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

5 Answers 5

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);
});