JavaScript issue in IE when adding numbers

Question

I have a simple form, with 5 textboxes and 3 answers (also textboxes). The form calculates a result for the user with number inputs. My problem is my calculation does not work in IE, but works fine in both Chrome and Firefox.

What's wrong?

Here is my function:

function addNumbers()
{
    var val1 = Number(document.getElementById("value1").value);
    var val2 = Number(document.getElementById("value2").value);
    var val3 = Number(document.getElementById("value3").value);
    var val4 = Number(document.getElementById("value4").value);
    var val5 = Number(document.getElementById("value5").value);
    var val6 = '100';
    var ansD1 = document.getElementById("answer1");
    ansD1.value = Number((val1 * val2) * (val4 / val6));
    var ansD2 = document.getElementById("answer2");
    ansD2.value = Number((val1 * val3) * (val5 / val6));
    var ansD3 = document.getElementById("answer3");
    ansD3.value = Number (ansD1.value - ansD2.value);
}

jfriend00 · Answer 1 · 2012-01-28T08:54:44.217

4

Change this line:

var val6 = '100';

to this:

var val6 = 100;

You want all your values to be actual numbers (not strings) so you can do math on them.

Also, you don't need the Number() in these lines because the result of the numeric math is already a number. Plus the assignment to the answer fields is just going to convert the result to a string anyway:

ansD1.value = Number((val1 * val2)*(val4/val6));

They can just be this:

ansD1.value = (val1 * val2)*(val4/val6);

The modified code works fine in IE here: http://jsfiddle.net/jfriend00/5WFRA/.

edited Jan 28 '12 at 08:54

answered Jan 28 '12 at 08:16

jfriend00

683,504
96
985
979

For that to work, the first element must be of type numeric. Check this link out : http://www.webdevelopersnotes.com/tutorials/javascript/javascript_string_arthimetic_operators.php3 – radu florescu Jan 28 '12 at 08:17
@Floradu88 - What do you think doesn't work? Your comment is not clear to me. – jfriend00 Jan 28 '12 at 08:23
@Floradu88 - Perhaps you are confused because `val1`, `val2`, etc... are already numbers because of the explicit typecast conversion to a number by the Number() function when the values are retrieved from the DOM. So, there is no implicit type conversion happening here other than the final conversion back to a string when it's assigned to `ansD1.value` and that implicit conversion is no problem. – jfriend00 Jan 28 '12 at 08:32
thanks for your help. I works fine in IE that example you posted. Then i must be the other "display" function, that i am using to cover det result until det button is pressed. – farnholdt Jan 28 '12 at 11:37
1

@jfriend00 `val`s aren't numbers, they are objects. Objects are converted to strings when using with Math-operators. Only proper way is to to convert input strings with `parseInt/Float()` instead of `Number`-object. After this conversion all variables behave like literal numbers in the script. – Teemu Jan 28 '12 at 11:46
@Teemu - `Number()` creates a number object that supports all math operations. It's a perfectly legitimate way to convert a string to a number and then do math operations on it. And, as you can see from the jsFiddle in my answer, it works too. See [here](http://stackoverflow.com/questions/4090518/string-to-int-use-parseint-or-number) for some discussion of the two and [here](http://jsperf.com/number-vs-parseint-vs-plus/17) for a performance comparison of a bunch of different ways to do the conversion. If you disagree, show me an example or reference that says otherwise. – jfriend00 Jan 28 '12 at 17:46

score 0 · Answer 2 · edited Jan 28 '12 at 09:25

0

Instead of Number use parseInt, otherwise they are treated as strings

edited Jan 28 '12 at 09:25

radu florescu

4,315
10
60
92

answered Jan 28 '12 at 08:14

machineaddict

3,216
8
37
61

1

`Number()` already converts a string to a number, similar to `parseInt()` except that Number handles integers or decimals. – jfriend00 Jan 28 '12 at 08:16
I have tried both Number and parseInt, but i won't work. It seems to be something else there is wrong, because when run the code in IE it places results in wrong textboxes, and a complet "0" in the other one. – farnholdt Jan 28 '12 at 08:33

JavaScript issue in IE when adding numbers

2 Answers2