Javascript storing a value as a string

Question

I am trying to create an html form that makes calculations based off of user input.

This is the code I have right now:

<form name="testing">
<table border="1" style="padding: 5px;">
<tr>
    <td>Ingredient Name</td>
    <td>Amount (in Mg)</td>
    <td>% Carrier</td>
    <td></td>
    <td>Total Carrier Volume</td>
    <td>Total Ingredient Volume</td>
</tr>
<tr>
    <td><input type="text"></input></td>
    <td><input type="number" id="a"> Mg</input></td>
    <td><input type="number" id="b"></input> %</td>
    <td><button type="button" onclick="calculate()">Calculate Final Volume</button></td>
    <td id="c"></td>
    <td id="d"></td>
</tr>
</table>
</form>

With the following javascript:

<script>
function calculate() {
    var volume = document.testing.a.value;
    var carrier = document.testing.b.value;
    var mCarrier = carrier/100;

    var x = document.getElementById("c").innerHTML = mCarrier*(volume/(1-mCarrier));
    document.getElementById("d").innerHTML = volume + x;
}
</script>

You can also see it here: www.healthkismet.com/supplement_pricer.html

Right now the line:

document.getElementById("d").innerHTML = volume + x

evaluates to string + x, but I am not sure why. If I do calculations with just x then everything is okay.

I think the way I'm storing the variables 'volume' and 'carrier' is the root cause but I don't know why. (and the 'x' variable is computed as an integer because it's already been divided and multiplied).

I've looked at this answer on stackexchange: Addition is not working in JavaScript and understand how to hack around it.

I've also seen this answer: take user input from a Form perform calculation (order of operations) and output back into that form but if I just typed that example in verbatim I wouldn't know exactly why my code doesn't work right now as it is.

You can use parseInt()/parseFloat() if you want the value as a number type. — K K, Nov 29 '14 at 04:58
Yes we can use this option but let us try to understand why is there a need to do this when the type="number" is already specified..!! — MixedVeg, Nov 29 '14 at 05:00
This question has been asked and answered about a dozen times. See http://stackoverflow.com/questions/4841373/how-to-force-js-to-do-math-instead-of-putting-two-strings-together, http://stackoverflow.com/questions/18614374/plus-arithmetic-operation, etc. — , Nov 29 '14 at 06:38
@MixedVeg - Specifying the `type="number"` attribute only affects how the browser renders the input field. It doesn't change the data type returned by the `.value` property, which remains a `string` in all cases. — Michael Geary, Nov 29 '14 at 06:38

score 0 · Accepted Answer · answered Nov 29 '14 at 05:03

0

Change to

var volume = parseInt(document.testing.a.value);

http://jsfiddle.net/st2y7agy/

answered Nov 29 '14 at 05:03

Rafael

7,605
13
31
46

Yagnesh Agola · Answer 2 · 2014-11-29T05:36:35.857

It is because your value of volume variable is treated as String values.
If you check the data type of the variable volume it show String by using JavaScript function typeof volume.

In your code It will convert your expression volume + x as String + Number which gives wrong answer as this will result in concatenate both as string.

From this reference Doc Adding two numbers, will return the sum, but adding a number and a string will return a string:

EDIT:

May this link will help to understand concept of <input type="number" ../>

Javascript storing a value as a string

2 Answers2