-1

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.

5
  • Hi can you type check the values of volume and carrier??
    – MixedVeg
    Nov 29, 2014 at 4:57
  • You can use parseInt()/parseFloat() if you want the value as a number type.
    – K K
    Nov 29, 2014 at 4: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, 2014 at 5:00
  • This question has been asked and answered about a dozen times. See stackoverflow.com/questions/4841373/…, stackoverflow.com/questions/18614374/plus-arithmetic-operation, etc.
    – user663031
    Nov 29, 2014 at 6: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. Nov 29, 2014 at 6:38

2 Answers 2

0

Change to

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

http://jsfiddle.net/st2y7agy/

0

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" ../>

Not the answer you're looking for? Browse other questions tagged or ask your own question.