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): </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): </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. UnlikeparseInt
, 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 convertchecked
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
Reset to default 4parseFloat
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);
});