JS - Math isn't coming out right

Question

I'm building an app that displays the weather and converts the current temp from Fahrenheit to Celsius. For some reason, when the conversion takes place, the math isn't coming out right. Oddly, after clicking the button 5 - 6 times, it starts working correctly.

My best guess is that I'm doing something wrong with parseInt() or maybe a variable isn't being updated.

Thoughts?

function toggleUnits(){
  if(wUnit.innerHTML == "C"){
    var oldTemp = parseInt(wTemp.innerHTML, 10),
        newTemp = oldTemp * 9 / 5 + 32;
    wTemp.innerHTML= newTemp;
    wUnit.innerHTML = "F";
    unitToggle.innerHTML ="Switch to Celsius";
  }else{
    var oldTemp = parseInt(wTemp.innerHTML, 10),
        newTemp = (oldTemp-32) * 5 / 9;
    wTemp.innerHTML= newTemp;
    wUnit.innerHTML = "C";
    unitToggle.innerHTML ="Switch to Fahrenheit";
  }
}

CodePen: https://codepen.io/abenjamin/pen/ZojJLq

Now it is not on fire and I am guessing you need to learn about https://stackoverflow.com/questions/588004/is-floating-point-math-broken — epascarello, May 15 '18 at 16:18
ObLink: http://docs.sun.com/source/806-3568/ncg_goldberg.html — Dave Newton, May 15 '18 at 16:22
@AaronBenjamin Ah, no. I instinctively click "Block" on those notifications. — Clint, May 15 '18 at 16:23

Elliot B. · Accepted Answer · 2018-05-15T17:02:56.210

It is helpful to scale up your decimal values by a consistent multiplier and represent all numbers as integers. For example, use 806 degrees instead of 80.6 degrees (multiply by 10) for your temperature calculations. This is to avoid the nuances with floating-point math. In JavaScript we only have the floating-point data type for numeric values, but luckily integer math under the floating-point data-type is exact. Therefore scaling up decimal values to integers (e.g., 2550 degrees instead of 25.50 degrees ) resolves the issue.

For example (converting from fahrenheit to celsius):

console.log((80.6-32) * 5 / 9); // outputs 26.999999999999996

Corrected with:

console.log((806-320) * 5 / 9 / 10 ); // outputs 27

The reason your calculator works correctly sometimes but not other times is because the temperature API sometimes returns integers, but other times returns decimal values.

I wouldn't recommend using parseInt to resolve this issue because it will round decimal values and you'll lose precision.

JS - Math isn't coming out right

1 Answers1