在Javascript中輸入表單的總和

Question

我希望用戶輸入一個數字，然后在提交時，將其插入到數組totalBags中。 然后，用戶可以提交另一個號碼，在提交時將數組元素添加到一起。 例如輸入= 2按提交輸出= 2新輸入= 3按提交輸出= 5

這是我的代碼：

<html>
<head>

<script type = "text/javascript">

function submitOrder()
{
var allBags = [];
var bags_text = document.getElementById("bags").value;
allBags.push(bags_text);
var totalBags = 0;

for (var i = 0; i < allBags.length; i++)
{
    totalBags += allBags[i]; // here is the problem... i think
}
document.getElementById("container").innerHTML = "<p>"+totalBags+"</p><input type=\"reset\" value=\"New Order\" onClick=\"resetOrder()\" />";
}
function resetOrder()
{   
document.getElementById("container").innerHTML = "<p><label for=\"bags\">No. bags: </label><input type=\"text\" id=\"bags\" /></p><p><input type=\"button\" value=\"Subit order\" onClick=\"submitOrder()\"> <input type=\"reset\" value=\"Reset Form\" /></p>";
}
</script>
</head>
<body>
<form name="order_form" id="order_form">
<div id="container">
<label>Total bags: </label><input id="bags" type="text" ><br>
<input type="button" id="submitButton" value="Subit order" onClick="submitOrder()">
<input type="reset" value="Reset" class="reset" />
</div>
</form>
</html>

Answer 1

嘗試使用：

for (var i = 0; i < allBags.length; i++)
{
    totalBags += parseInt(allBags[i],10); 
}

或者如果您願意，可以使用Number(allBags[i]) 。

你的元素allBags[i]是字符串和字符串之間的+並連接它們。

進一步研究： JavaScript中的parseInt（string）和Number（string）有什么區別？

Answer 2

我應該重寫一下這個程序。 首先，您可以定義不會在函數中實例化的全局變量。 你這樣做，重置變量。 鐵

function submitOrder()
{
    var allBags = [];
    // ...
}

這意味着每次點擊按鈕時， allBags被創建為一個新數組。 然后從input元素中添加一個值。 結果是你總是有一個元素的數組。 最好在函數外聲明它。 這樣，您可以確保保留變量。

// general variables
var allBags = [];
var totalBags = 0;

function submitOrder()
{
    // the result is a string. You have to cast it to an int to ensure that it's numeric
    var bags_text = parseInt(document.getElementById("bags").value, 10);
    // add result to allBags
    allBags.push(bags_text);
    // total bags
    totalBags += bags_text;

    // display the result
    document.getElementById("container").innerHTML = "<p>"+totalBags+"</p><input type=\"reset\" value=\"New Order\" onClick=\"resetOrder()\" />";
}

通過省略循環，你有一個更高效的程序。 但是，如果您使用重置按鈕，請不要忘記將數組和totalBags變量清除為0。

function resetOrder()
{   
    document.getElementById("container").innerHTML = "...";
    // reset variables
    totalBags = 0;
    allBags = [];
}

Answer 3

function submitOrder()
{
var allBags = parseInt(document.getElementById("bags").value.split(""),10);//Number can also used
var totalBags = 0;

for (var i = 0; i < allBags.length; i++)
{
    totalBags += allBags[i]; 
}
document.getElementById("container").innerHTML = "<p>"+totalBags+"</p><input type=\"reset\" value=\"New Order\" onClick=\"resetOrder()\" />";
}

在Javascript中輸入表單的總和

問題描述

3 個解決方案

解決方案1
1 2014-05-23 13:32:55

解決方案2
1 2014-05-23 13:36:50

解決方案3
0 2014-05-23 13:33:40

在Javascript中輸入表單的總和

問題描述

3 個解決方案

解決方案1 1 2014-05-23 13:32:55

解決方案2 1 2014-05-23 13:36:50

解決方案3 0 2014-05-23 13:33:40

解決方案1
1 2014-05-23 13:32:55

解決方案2
1 2014-05-23 13:36:50

解決方案3
0 2014-05-23 13:33:40