Strange results while adding / subtracting Floats in Javascript

Question

I'm experimenting with JavaScript for the first time. My objective is to build a little 'configurator'. On my page, there are 2 buttons triggering the following functions onclick:

function default()
{
 curPrice = parseFloat(document.getElementById('price').innerHTML);
 newPrice = curPrice-priceEngraving;
 document.getElementById('price').innerHTML=newPrice;
}

and the other one looks like this:

function engrave()
{
var str = document.getElementById('price').innerHTML;
newPrice = curPrice+priceEngraving;
document.getElementById('price').innerHTML=newPrice;
}

priceEngraving is defined as 1 and the "default" innerHtml of #price is 5.30. When pressing button 1, the following result comes up:
6.3

This is okay and the expected result (appending a 0 on the end isn't too hard).

When firing button #2 the following result comes up: 5.3000000000000004

I don't know where's the problem in my code. I also tried ++ and -- (which I don't prefer because, as you know, prices are subject to change).

Also, I know about the security concerns when using JavaScript, but this one's only optical.

Duplicate question. Many, many times duplicate. stackoverflow.com/questions/588004/is-javascripts-math-broken — Jeremy J Starcher
– Jeremy J Starcher, Commented Oct 12, 2012 at 19:12

halex · Accepted Answer · 2012-10-12 19:09:33Z

2

The problem is that some numbers can not be representated precisely as a floating point number. If you always want 2 decimal places then you can use the method toFixed(2) (documentation) on your numbers.

document.getElementById('price').innerHTML=newPrice.toFixed(2);

answered Oct 12, 2012 at 19:09

halex

16.4k6 gold badges60 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:27:56Z

0

You are having floating point problems. See this post for details, the issues have been covered there in detail. Basically there is no way to map what you have accurately enough.

edited May 23, 2017 at 12:27

CommunityBot

11 silver badge

answered Oct 12, 2012 at 19:06

davehale23

4,3722 gold badges30 silver badges40 bronze badges

1 Comment

Robin Heller Over a year ago

Thanks for the answer, it was more accurate, but the other answer has helped me more in finding an acceptable solution!

Collectives™ on Stack Overflow

Strange results while adding / subtracting Floats in Javascript

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related