javascript - 添加来自js中输入的值

Question

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

这些是我的输入(它们看起来都一样):

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

Answer 1

.value 从输入返回的值被认为是 string 所以你应该将它们转换为 float 然后你可以进行计算，所以替换以下行:

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>