javascript - 在JavaScript中添加多个HTML表单输入值

为什么我不能将三个数字加在一起，我感到困惑。这是我的HTML:

<div><label>Sales Price: </label>
    <input type="number" name="sales_price" value="3">
</div>
<div><label>Incentives: </label>
    <input type="number" name="incentives" value="2">
</div>
<div><label>Acquisition Fee: </label>
    <input type="number" name="acq_fee" value="1">

这是我的JavaScript:

var salesPrice = document.getElementsByName("sales_price")[0];
var incentives = document.getElementsByName("incentives")[0];
var acqFee = document.getElementsByName("acq_fee")[0];

var netCapCost = salesPrice.value - incentives.value + acqFee.value;

我想做一个简单的计算:(3-2 + 1)=2。但是，netCapCost返回11，这是(3-2)和1的结果的并置。我做错了什么？提前谢谢了!

最佳答案

var salesPrice;
var incentives;
var acqFee;
var npc;


function calculate(e) {
    var netCapCost = (parseFloat(salesPrice.value) - parseFloat(incentives.value) + parseFloat(acqFee.value)).toPrecision(3);
    npc.value = netCapCost;
}

window.onload = function (){


salesPrice = document.getElementsByName("sales_price")[0];
incentives = document.getElementsByName("incentives")[0];
acqFee = document.getElementsByName("acq_fee")[0];
npc = document.getElementsByName("npc")[0];
	salesPrice.onchange = calculate;
	calculate();


};

您的问题是文本字段的值始终为STRING类型。减去时将强制转换为FLOAT类型。然后加号操作与串联操作共享一个运算符。因此，当您添加两个字符串时，它会串联在一起，而不是转换为FLOAT或INT。因此，基本上，您已经将“2”-“1”转换为2-1，因为不能减去字符串，这将为您提供(1)，然后您将具有(1)+“1”，它们将连接起来而不是加上字符串。当期望来自用户输入的数字数据时，请始终使用parseFloat或parseInt，因为最初提交时它将始终是字符串。

float

javascript - 在JavaScript中添加多个HTML表单输入值