Sum of form input in Javascript

Question

I want the user to enter a number then when it is submitted, it is inserted into the array totalBags. The user can then submit another number, when submitted the array elements are added together. E.g. Input = 2 Press submit Output = 2 New input = 3 Press submit Output = 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>

bags_text is probably a string you need to convert to number probably the simplest way var number = +bags_text; — Dalorzo, May 23 '14 at 13:31
with javascript do not use += it can produce some odd results in some circumstances — Dalorzo, May 23 '14 at 13:31

score 1 · Answer 1 · edited May 23 '17 at 11:50

1

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.

Your element allBags[i] is a string and + between strings and concatenting them.

Further study: What is the difference between parseInt(string) and Number(string) in JavaScript?

edited May 23 '17 at 11:50

Community

1
1

answered May 23 '14 at 13:32

Alexandru Chichinete

1,166
12
23

KarelG · Answer 2 · 2014-05-23T13:42:42.270

1

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. Then you add an value from the input element. 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.

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

edited May 23 '14 at 13:42

answered May 23 '14 at 13:36

KarelG

5,176
4
33
49

2

Replace the `parseInt(document.getElementById("bags").value);` with `parseInt(document.getElementById("bags").value,10);` because 0x10 will be considered as 16 even it isn't an base 10 number. See more info http://www.w3schools.com/jsref/jsref_parseint.asp – Alexandru Chichinete May 23 '14 at 13:39
And you need more actions in `resetOrder` function. – Yury Tarabanko May 23 '14 at 13:41
+1 @kikyalex, but he's a starter, so i doubt that he would start an experiment with octal or hexadecimal values ;) – KarelG May 23 '14 at 13:46
as he said: "I want the user to enter a number". Never fully trust an user. What if the user wants to start with 0 lets say he wants the number 010 ( which should be 10 but is not ). He write the user asked for 8 products instead of 10 and so on.. – Alexandru Chichinete May 23 '14 at 13:49
I know it says avoid comments like 'thanks' but seriously, THANK YOU SO MUCH! This is an assignment and I dont just want it to work but I want to KNOW and LEARN my mistake so it wont happen in the future. Thank you for not just helping me, but also showing my why it works :-) – user3669077 May 24 '14 at 01:49

Govind Singh · Answer 3 · 2014-05-23T13:40:31.640

0

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

edited May 23 '14 at 13:40

answered May 23 '14 at 13:33

Govind Singh

15,282
14
72
106

Sum of form input in Javascript

3 Answers3