添加来自js中输入的值答案

【问题标题】：Adding values coming from input in js添加来自js中输入的值
【发布时间】：2016-03-26 05:51:52
【问题描述】：

当我尝试添加多个值时，它们只是被附加了。

这些是我的输入（它们看起来都一样）：

<input type="number" id="floatOne" required>

这是我的脚本：

<script>
function calcExactFloat(){
    var floats = new Array(document.getElementById("floatOne").value, document.getElementById("floatTwo").value,document.getElementById("floatThree").value,document.getElementById("floatFour").value,document.getElementById("floatFive").value,document.getElementById("floatSix").value,document.getElementById("floatSeven").value,document.getElementById("floatEight").value,document.getElementById("floatNine").value,document.getElementById("floatTen").value);

    var sum = 0;

    for(var i = 0; i < floats.length; ++i){
        sum = sum + floats[i];
        console.log(sum);
    }

【问题讨论】：

我认为你必须解析为数字 sum=sum+parseFloat(floats[i])

标签： javascript append addition

【解决方案1】：

.value 从输入返回的值被视为string，所以你应该将它们转换为浮点数然后你可以进行计算，所以替换以下行：

sum = sum + floats[i];

作者：

sum = sum + parseFloat(floats[i]);

希望这会有所帮助。

var floats = new Array(document.getElementById("floatOne").value, document.getElementById("floatTwo").value,document.getElementById("floatThree").value,document.getElementById("floatFour").value);

var sum = 0;

for(var i = 0; i < floats.length; ++i){
  sum = sum + parseFloat(floats[i]);
}

result.textContent = sum;

<input type="number" id="floatOne" value='10'>
<input type="number" id="floatTwo" value='10'>
<input type="number" id="floatThree" value='10'>
<input type="number" id="floatFour" value='10'>
<br/>
Result : <span id="result"></span>

【讨论】：

【解决方案2】：

如果是字符串，则输入元素的值，即使该字符串表示数值。在 JavaScript 中，字符串的“添加”会导致串联 - ('1' + '1') === '11'。

为了将字符串转换为数字，最简单的方法是在变量前使用 + - +a + +b。

试试这样：

var sum = 0;

for(var i = 0; i < floats.length; ++i){
    sum = sum + +floats[i];
    console.log(sum);
}

【讨论】：

【解决方案3】：

你必须使用 parseFloat

function calcExactFloat(){
    var floats = new Array(document.getElementById("floatOne").value, document.getElementById("floatTwo").value,document.getElementById("floatThree").value,document.getElementById("floatFour").value,document.getElementById("floatFive").value,document.getElementById("floatSix").value,document.getElementById("floatSeven").value,document.getElementById("floatEight").value,document.getElementById("floatNine").value,document.getElementById("floatTen").value);

    var sum = 0;

    for(var i = 0; i < floats.length; i++){
	if(floats[i])
        sum = sum + parseFloat(floats[i]);
    }
	alert(sum)
	}

 <input type="number" id="floatOne" required><br />
	<input type="number" id="floatTwo" required><br />
	<input type="number" id="floatThree" required><br />
	<input type="number" id="floatFour" required><br />
	<input type="number" id="floatFive" required><br />
	<input type="number" id="floatSix" required><br />
     <input type="number" id="floatSeven" required><br />
	<input type="number" id="floatEight" required><br />
	<input type="number" id="floatNine" required><br />
	<input type="number" id="floatTen" required><br />
  <input type="button" value="Calc" onclick="calcExactFloat()" />

【讨论】：