Question

我正在尝试创建一个基于用户输入进行计算的html表单。

这是我现在的代码：

<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>

使用以下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>

您也可以在此处查看：www.healthkismet.com/supplement_pricer.html

现在就行：

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

计算为字符串+ x，但我不确定原因。如果我用x进行计算，那么一切都还可以。

我认为我存储变量'volume'和'carrier'的方式是根本原因，但我不知道为什么。（并且'x'变量计算为整数，因为它已被分割并相乘）。

我在stackexchange上查看了这个答案：Addition is not working in JavaScript并了解如何破解它。

我也看到了这个答案：take user input from a Form perform calculation (order of operations) and output back into that form但如果我只是逐字输入该示例，我就不知道为什么我的代码现在不能正常工作。

Answer 1

更改为

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

http://jsfiddle.net/st2y7agy/

Answer 2

这是因为您volume变量的值被视为String值如果您使用JavaScript函数typeof volume检查变量volume的数据类型，则会显示String。

在您的代码中它会将您的表达式volume + x转换为String + Number，这会给出错误的答案，因为这会导致将它们连接为字符串。

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

编辑：

May this link将有助于理解<input type="number" ../>

的概念

Javascript将值存储为字符串

2 个答案: