1

I am writing a very basic html calculator. The end result and user inputs are shown in "textDisplay_" area below: 

<div id ="textDisplayRow_"> 
   <div id = "textDisplay_" class = "calcTextDisplay">0.0</div>
</div>

I also have a JavaScript code that gets and parses the displayed value into a float using these functions:

function getCurrentText() {
    "use strict";
    return document.getElementById("textDisplay_").innerHTML;
}

function getDisplayedNum() {
    "use strict";
    if (getCurrentText() === emptyMesg) {
        return maxSafeInt;
    }

    var t = 1*getCurrentText();
    //var t = parseFloat(getCurrentText(), 10); 

    if ((isNaN(t)) || (t === undefined)) {
        return 0;
    } else {
        return t;
    }
}

This code works beautifully on desktop browsers (I have tested it on Chrome, FireFox and IE) They all look good and lets say if I enter: 3.14*2 and press'=' they give me 6.28.

However on my android 4, using the latest versions of mobile chrome and firefox all the decimal numbers get rounded down! so If I punch in "3.14*2=", I will get "6"!

How can I fix this issue? I have looked at other posts containing parseFloat does not work and none of them are similar to this issue. Also both of give similar results:

1*getCurrentText();

parseFloat(getCurrentText(), 10);

One option is to write my own parseFloat (I have previously done this for a micro controller!) but I really dont wanna go that way.

Thanks a lot in advance.

AleX_
  • 508
  • 1
  • 6
  • 20
  • I learned the 1* trick in [this post](http://stackoverflow.com/questions/3638074/javascript-adding-two-numbers-incorrectly/4600744#4600744) while browsing through all "parseFloat" not working questions. – AleX_ Apr 05 '16 at 23:03
  • Unfortunately I think this is just the way it is on mobile browsers, can you try quickly without a decimal in the numbers? does it work then? – omarjmh Apr 05 '16 at 23:11
  • Is this all the code? A common, though sometimes risky, way to reduce a string containing a math expression to a value is `eval("3.14*2")`. All `parseFloat()` is required to do is convert strings containing numbers to number, not expressions. It can return a number and ignore subsequent non-numeric characters. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat – Paul Apr 05 '16 at 23:12
  • Have you checked it without "use strict";? – Citrullin Apr 05 '16 at 23:26
  • @PhilippBlum no I have not! Before adding the "use strict" I was parsing Integers. – AleX_ Apr 05 '16 at 23:28
  • @Paul, I know about the "eval" way but since as you said its risky I dont want to try that! Also all online "calculator examples" use "eval". I wanted to be more adventureous! – AleX_ Apr 05 '16 at 23:29
  • @Omarjmh, yes it works perfectly without decimals (i.e. working with Ints) – AleX_ Apr 05 '16 at 23:30
  • yup thought so! thats it, you have to find another way to do it, curious if the answer below works... – omarjmh Apr 05 '16 at 23:31
  • Please visit https://jsfiddle.net/xpkhqdLa/1/ in your mobile browser and on desktop. Do they really produce different results? They are identical on Windows/Chrome versus iPhone/Safari. – Phrogz Apr 06 '16 at 17:04
  • 1
    Note that [`parseFloat()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat), unlike `parseInt()` does not accept a radix as a second argument. _(In other words, your `,10` is not needed, and does nothing.)_ – Phrogz Apr 06 '16 at 17:07

2 Answers2

1

I'm pretty sure that your problem is not what you think it is. Please visit this page on your desktop and mobile browser. For me, they produce the same results.

https://jsfiddle.net/xpkhqdLa/1/

With str being a string holding a floating point number, all of the below produce the same, proper floating-point value:

var values = [ str*1, 1*str, 1.0*str, parseFloat(str) ];
Phrogz
  • 296,393
  • 112
  • 651
  • 745
  • Thanks for the comment. I will look into it. – AleX_ Apr 06 '16 at 17:37
  • They produce the same result for me as well! but the only change that I made was adding ".0" to the 1* and it fixed it for mobile browsers. I even put more of my code up there to see maybe if other parts (lets say functions that mess with precision) are to blame but no! jsFiddle works just fine on both desktop and mobile. Please see: https://jsfiddle.net/evfb4zpy/4/ – AleX_ Apr 06 '16 at 19:56
  • btw Im just learning JS and thanks alot for introducing me to jsFiddle! It did help for this case but it is a really cool toy. – AleX_ Apr 06 '16 at 19:57
  • I'd recommend creating a reproducible testcase (either on your own page, or on JSFiddle.net) that is *pared down to the absolute minimum code needed to reproduce the problem*. Start with HTML+JS that shows the problem. Then delete code and HTML. Replace function calls with inline code. Get rid of extraneous code. Remove tests for and handling of edge cases. As long as the problem reproduces, keep paring it down. Eventually the problem will not reproduce, and you'll have to ponder why the change you just made fixed it. And you'll have your "Ah-HA!" moment showing you where the problem lies. – Phrogz Apr 06 '16 at 21:50
0

You can try:

var t = 1.0 * getCurrentText();

to get a float.

Poul Bak
  • 10,450
  • 5
  • 32
  • 57
  • Thanks, Im gonna try it and keep you posted. – AleX_ Apr 05 '16 at 23:29
  • I have downvoted this answer, because in JavaScript there is no differentiation between integers and floats. They are both `number` values. Though the OP has accepted this answer, I claim that there is no possible way that this would fix the problem, where `parseFloat( getCurrentText() )` or `1*getCurrentText()` would fail. This is, IMHO, a red herring. Sorry, @PoulBak – Phrogz Apr 06 '16 at 21:52
  • Wel, it's clearly some kind of bug, and bugs don't follow rules! – Poul Bak Apr 07 '16 at 01:34