Question

我很困惑为什么我不能将三个数字加在一起。这是我的HTML：

2.2.2 > t.values
 => #<ActiveRecord::Associations::CollectionProxy []>

这是我的JavaScript：

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

我想要完成一个简单的计算：（3-2 + 1）= 2.但是，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;返回11，这是（3-2）和1的结果的串联。我做错了？非常感谢提前！

Answer 1

您需要将这些值转换为parseInt()的数字，否则+运算符将被解释为字符串连接。你在做什么

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

哪个是

var netCapCost = "3" - "2" + "1"

"3"-"2"将返回1，这是您想要的，但1 + "1"将连接到"11"，因为右操作数是一个字符串。所以数字+字符串 - ＆gt;级联

Answer 2

你正在进行字符串连接，从输入值得到的所有值都是字符串，

第一次计算salesPrice.value - incentives.value是当前是因为-符号将incentives.value转换为数字

当前的方式是

var netCapCost = parseInt(salesPrice.value, 10) - parseInt(incentives.value, 10) + parseInt(acqFee.value, 10);

最好使用数学库在javascript中进行计算，因为迟早会遇到像0.3 - 0.2 = 0.09999999

这样的问题

Answer 3

＆＃13;

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();
	
	
};

＆＃13;

您的问题是文本字段值始终为STRING类型。减去它会强制转换为FLOAT类型。然后，plus操作与concatenate操作共享一个opperator。因此，当您添加两个字符串时，它会连接而不是转换为FLOAT或INT。所以基本上你有＆＃34; 2＆＃34; - ＆＃34; 1＆＃34;被转换为2-1，因为不能减去字符串给你（1）然后你有（1）+＆＃34; 1＆＃34;这将连接而不是添加，因为你有一个字符串。在期望来自用户条目的数字数据时始终使用parseFloat或parseInt，因为它在最初提交时始终是一个字符串。

Answer 4

我认为这里的混淆是HTML 5引入了输入类型编号，但是javascript引擎并没有引入对阅读这些特定字段的支持。我们最终使用旧的传统方式读取输入字段值，默认所有内容都为字符串。

使用数字类型字段的唯一好处是您不必担心没有输入数字的异常/错误情况。

建议使用parseInt函数的其他答案是要走的路，除非你有奢侈的介绍jQuery这样的javascript框架并使用更复杂的方法来阅读它。

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

4 个答案: