Javascript数字连接而不是添加，但typeof是数字而不是字符串

Question

我是 javaScript 的新手。我正在构建一个计算器here

我已将输入值存储在变量中，以便最终可以操纵结果以根据输入执行计算。现在我只想把所有的值加在一起。

但是，它们不是相加，而是串联。我使用 parseInt 来防止 javascript 将数字视为字符串，而 typeOf 显示它们是数字。

这是我的 javascript：

$(document).ready(function() {

var theTerm = $("#theTerm").val();
var theRate = $("#theRate").val();
var thePrice = $("#thePrice").val();
var theTax = $("#theTax").val();
var theDown = $("#theDown").val();
var theTrade = $("#theTrade").val();
var theResult = parseInt(theTerm + theRate + thePrice + theTax + theDown + theTrade, 10);

$("#calculate").click(function(){
    alert(theResult);
    alert(typeof(theResult));
});

}); 

和 HTML：

<div id="calculator">
<span id="calculatorHeader">Monthly Payment Calculator</span>
<table style="margin:0 auto;">
    <tr>
    <td style="width:40px;">Term
        <input id="theTerm" size="5" value="7" name="term" style="width:35px" />
    </td>
    <td style="width:40px;">Rate(%)
        <input id="theRate" size="5" value="7" name="apr" style="width:35px" />
    </td>
    <td style="width:55px;">Price($)
        <input id="thePrice" size="6" maxlength="7" name="price" style="width:50px" value="7" />
    </td>
    <td style="width:40px;">Tax(%)
        <input id="theTax" size="4" maxlength="7" name="tax" style="width:35px" value="7" />
    </td>
    <td style="width:40px;">Down($)
        <input id="theDown" size="5" maxlength="7" name="downPmt" style="width:35px" value="7" />
    </td>
    <td style="width:40px;">Trade($)
        <input id="theTrade" size="5" maxlength="7" name="trade" style="width:35px" value="7" />
    </td>
    <td style="width:78px;">Est.Monthly Pmt
        <input id="theResult" size="7" maxlength="7" name="result" style="width:75px" value="0" />
    </td>
    </tr>
</table>
<button type="button" id="calculate">Add Boxes!</button>
</div>

Answer 1

更改行并将 parseInt 应用到每个 obj 如下

var theResult = parseInt(theTerm) + parseInt(theRate) + parseInt(thePrice) + parseInt(theTax) + parseInt(theDown) + parseInt(theTrade);

Answer 2

您可以将数字乘以1，而不是使用parseInt。它是一种更快、更简单的数据类型转换方法。

$(document).ready(function () {
    var theTerm = $("#theTerm").val() * 1;
    var theRate = $("#theRate").val() * 1;
    var thePrice = $("#thePrice").val() * 1;
    var theTax = $("#theTax").val() * 1;
    var theDown = $("#theDown").val() * 1;
    var theTrade = $("#theTrade").val() * 1;
    var theResult = theTerm + theRate + thePrice + theTax + theDown + theTrade;

    $("#calculate").click(function () {
        alert(theResult);
        alert(typeof (theResult));
    });
});

JSFiddle：http://jsfiddle.net/RqzPk/14/

Answer 3

稍微整理一下你的代码，避免重复：

DEMO

$(document).ready(function() {
    $("#calculate").click(function(){   
        var inputs = $("input"), theResult = 0;  // `inputs` is the list of all input elements

        for(var i = 0;i < inputs.length; i++)  // iterate over all inputs
            // parse their value, in base 10, and add to the theResult
            theResult += parseInt(inputs[i].value, 10); 

        alert(theResult); // 42
    });
});

Answer 4

你必须使用java脚本的parseInt函数。

例如：var theTerm = parseInt($("#theTerm").val());

demo

Answer 5

您将字符串与 + 连接起来，然后将连接后的结果转换为 int。

您希望在添加之前 转换为整数。比如：

var theTerm = parseInt($("#theTerm").val(), 10);
...
var theResult = theTerm + theRate + thePrice + theTax + theDown + theTrade;