在Javascript中输入表单的总和
[英]Sum of form input in Javascript
问题描述
I want the user to enter a number then when it is submitted, it is inserted into the array totalBags. 
我希望用户输入一个数字，然后在提交时，将其插入到数组totalBags中。 The user can then submit another number, when submitted the array elements are added together. 然后，用户可以提交另一个号码，在提交时将数组元素添加到一起。 Eg Input = 2 Press submit Output = 2 New input = 3 Press submit Output = 5 例如输入= 2按提交输出= 2新输入= 3按提交输出= 5
Here is my code: 这是我的代码：
<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>
3 个解决方案
解决方案1
1 2014-05-23 13:32:55
Try to use: 尝试使用：
for (var i = 0; i < allBags.length; i++)
{
totalBags += parseInt(allBags[i],10);
}
Or use Number(allBags[i]) if you prefer that. 或者如果您愿意，可以使用Number(allBags[i]) 。
Your element allBags[i] is a string and + between strings and concatenting them. 你的元素allBags[i]是字符串和字符串之间的+并连接它们。
Further study: What is the difference between parseInt(string) and Number(string) in JavaScript? 进一步研究： JavaScript中的parseInt（string）和Number（string）有什么区别？
解决方案2
1 2014-05-23 13:36:50
I should rewrite the program a bit. 我应该重写一下这个程序。 First, you can define global variables which won't be instantiated in the function. 首先，您可以定义不会在函数中实例化的全局变量。 You are doing that, which resets the variables. 你这样做，重置变量。 Fe 铁
function submitOrder()
{
var allBags = [];
// ...
}
It means that each time you're clicking on the button allBags is created as a new array. 这意味着每次点击按钮时， allBags被创建为一个新数组。 Then you add an value from the input element. 然后从input元素中添加一个值。 The result is that you have always an array with one element. 结果是你总是有一个元素的数组。 It's best to declare it outside the function. 最好在函数外声明它。 By this, you ensure that the variables are kept. 这样，您可以确保保留变量。
// 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()\" />";
}
by leaving out the loop, you have an more performant program. 通过省略循环，你有一个更高效的程序。 But don't forget to clear the array and the totalBags variable to 0 if you're using the reset button. 但是，如果您使用重置按钮，请不要忘记将数组和totalBags变量清除为0。
function resetOrder()
{
document.getElementById("container").innerHTML = "...";
// reset variables
totalBags = 0;
allBags = [];
}
解决方案3
0 2014-05-23 13:33:40
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()\" />";
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.