-5

I encountered this weird anomaly creating a simple javaScript demo that I am going to use to teach my 11 year old the basics of coding. I think that perhaps I didn't sanitize the input strings before I used the javaScript parse float javaScript function. The program works fine for other floating point decimals ie. 2.5 + 3 = 5.5. However in this one instance 1.445 + 2 = 3.4450000000000003. Purely out of curiosity I would like to know what is going on here. So with out any further delay, here's the JavaScript code:

var funct = null;
function clarifyOperation(x)
{
    if(x=="add")
    {
        document.getElementById("operation").innerHTML=" + ";
        funct="add";
    }
    else if(x=="subtract")
    {
        document.getElementById("operation").innerHTML=" - ";
        funct="subtract";
    }
    else if(x=="multiply")
    {
        document.getElementById("operation").innerHTML=" × ";
        funct="multiply";
    }
    else if(x=="divide")
    {        
        document.getElementById("operation").innerHTML=" ÷ ";
        funct="divide";
    }
}

function solve()
{
    var x=document.getElementById("inputX").value;
    var y=document.getElementById("inputY").value;
    var z;
    if(funct=="add")
    {
        z=parseFloat(x)+parseFloat(y);
        document.getElementById("result").value=z;
    }
    else if(funct=="subtract")
    {
        z=parseFloat(x)-parseFloat(y);
        document.getElementById("result").value=z;
    }
    else if(funct=="multiply")
    {
        z=parseFloat(x)*parseFloat(y);
        document.getElementById("result").value=z;
    }
    else if(funct=="divide")
    {
        z=parseFloat(x)/parseFloat(y);
        document.getElementById("result").value=z;
    }
}

Here is the HTML code: 

<input type="text" value="" id="inputX"/>
<span id="operation">&nbsp;</span>
<input id="inputY" type="text" value="" />
<span>&nbsp;&#61;&nbsp;</span>
<input type="text" value="" id="result" /><br />
<input type="radio" name="operation" value="add" onchange="clarifyOperation(this.value)" />
<span>&#43;</span><br />
<input type="radio" name="operation" value="subtract" onchange="clarifyOperation(this.value)" />
<span>&#45;</span><br />
<input type="radio" name="operation" value="multiply" onchange="clarifyOperation(this.value)" />
<span>&#215;</span><br />
<input type="radio" name="operation" value="divide" onchange="clarifyOperation(this.value)" />
<span>&#247;</span><br />
<input type="button" value="calculate" onclick="solve()" />
<hr />

Reminder to the community: keep your comment's useful.

Lee Taylor
  • 7,761
  • 16
  • 33
  • 49
user2699886
  • 11
  • 1
  • 1
  • 9
    [What Every Computer Scientist Should Know About Floating-Point Arithmetic](http://docs.oracle.com/cd/E19957-01/806-3568/ncg_goldberg.html) – Habib Aug 20 '13 at 13:15
  • 1
    possible duplicate of [Is JavaScript's Floating-Point Math Broken?](http://stackoverflow.com/questions/588004/is-javascripts-floating-point-math-broken) – apsillers Aug 20 '13 at 13:19
  • 2
    Note to the OP: the fundamental question you're asking isn't too bad (the problem is well-understood, but it's difficult to search for if you don't know the phrase "floating point"); however, your question is probably getting so many downvotes because your example code is needlessly long. You can recreate the problem using only a few lines of code. – apsillers Aug 20 '13 at 13:22
  • Also, if you are going to teach programming then you should encourage the use of meaningful variable names. – Lee Taylor Aug 20 '13 at 13:24

1 Answers1

1

There are some fair explanations done in these SO answers that describes the problem with decimal numbers in computers, with Javascript in mind.

To fix the numbers to not have wonky decimals though you may round them with toFixed(…) function. Such as this:

(parseFloat('1.445') * parseFloat('2')).toFixed(3);
Community
  • 1
  • 1
Spoike
  • 119,724
  • 44
  • 140
  • 158