Question

So I have been working on writing a script that takes in input from 10 different fields and if anything on the dropdown is changed a popScore and popLevel gets updated accordingly. I ran into a little issue with it producing a number with like 10 decimals so I had to round it to 2. The javascript works on all browsers except Internet Explorer. What causes it to fail on Internet Explorer?

Below I included the javascript for only one of the dropdowns to save space but the difference between them is the values for the popScore and the number of items in the dropdown. The popLevel can only go up to 5.

Any help on understanding why it doesn’t work is greatly appreciated. Thanks.

 <script type="text/javascript">
 $(document).ready(function(){
  //global variables
  var popLevel = 0;
  var popScore = 0.00;
  var q1=0;
  var q2=0;
  var q3=0;
  var q4=0;
  var q5=0;
  var q6=0;
  var q7=0;
  var q8=0;
  var q9=0;
  var q10=0;
$('.selectionbox1').change(function() {
    if(q1 != 0){
        if(q1 == 1){
        popScore = popScore - 0.13;
        }
        else if(q1 == 2){
        popScore = popScore - 0.25;
        }
        else if(q1 == 3){
        popScore = popScore - 0.38;
        }
        else if(q1 == 4){
        popScore = popScore - 0.50;
        }
        else if(q1 == 5){
        popScore = popScore - 0.63;
        }
    }
    var b = document.getElementById("q1").value;
    if(b == 1){
        popScore = popScore + 0.13;
    }
    else if(b == 2){
        popScore = popScore + 0.25;
        }
    else if(b == 3){
        popScore = popScore + 0.38;
    }
    else if(b == 4){
        popScore = popScore + 0.50;
        }
    else if(b == 5){
        popScore = popScore + 0.63;
    }

    if(popScore > 4.00){
    popLevel=5;
    }
    else if(popScore > 3.00){
    popLevel=4;
    }
    else if(popScore > 2.00){
    popLevel=3;
    }
    else if(popScore > 1.00){
    popLevel=2;
    }
    else if(popScore > 0.00){
    popLevel=1;
    }

    //record the current value of the field changed
    var e = document.getElementById("q1");
    q1=e.options[e.selectedIndex].value;

    //round to 2 decimal places for score
    popScore = parseFloat(popScore.toFixed(2));

    //update the fields for pop score and pop level
    var txt = document.getElementById("popLevel");
    txt.innerHTML=popLevel;
    var txt2 = document.getElementById("popScore");
    txt2.innerHTML=popScore;
});

Answer 1

Floating numbers are not exact. You should always round them for display purposes. When I type 2.48+1.49 on my JS console in chrome, I get 3.9699999999999998. This is true for any language that uses http://en.wikipedia.org/wiki/IEEE_754, which is the most widely used floating point format.

Here’s a good explanation of the problem: http://docs.python.org/tutorial/floatingpoint.html It’s for Python, but like I mentioned before, most languages use the same format.