Calculate the sum of values in input elements using JavaScript

Question

I'm trying to compute the sum of many inputs that are displayed, in order to make an invoice. All products that must be invoiced are recorder in my database, and I wrote this JavaScript function to calculate the total:

<script type="text/javascript">
function getItems()
 {
 var items = new Array();
 var itemCount = document.getElementsByClassName("items");
 var total = 0;
 for(var i = 0; i < itemCount.length; i++)
 {
     total = total +  document.getElementById("p"+(i+1)).value;
 }

 return total;
 document.getElementById('tot').value= total;
 }
 getItems()</script>

The problem is that I get Uncaught TypeError: Cannot read property 'value' of null on the line total = total + document.getElementById("p"+(i+1)).value;

I really do not understand why, because all my variables are declared.

It means document.getElementById("p"+(i+1)) returns null, no element with id "p"+(i+1) was found. — Musa
– Musa, Commented Nov 5, 2012 at 7:29

MJ Fathinia · Accepted Answer · 2012-11-05 07:43:31Z

5

You already got the elements by using getElementsByClassName, why you are getting it again by id? You can try following:

function getItems()
{
    var items = document.getElementsByClassName("items");
    var itemCount = items.length;
    var total = 0;
    for(var i = 0; i < itemCount; i++)
    {
        total = total +  parseInt(items[i].value);
    }
    document.getElementById('tot').value = total;
}
getItems();

answered Nov 5, 2012 at 7:43

MJ Fathinia

2592 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jfriend00 · Accepted Answer · 2012-11-05 07:50:42Z

2

One or more of the items with an id for "p"+(i+1) apparently does not exist. You didn't show us your HTML so we can't be more specific than that.

But, since you already have a nodeList that is an array-like list of the items from getElementsByClassName(), there is no need to get them all over again. As such, you can much more safely rewrite the code to use that and it should also protect you from trying to reference a non-existent item since getElementsByClassName() won't return null items. There are also a couple other issues:

You need to convert the results to numbers before doing the addition so you are adding numbers, not strings:

total = total + Number(items[i].value);
You also need to put the return AFTER you assign the total or the assignment will not get executed:

document.getElementById('tot').value = total; return total;
And, since you don't show us your HTML, we don't know what items actually exist so you can protect your code from items that don't exist by using the actual nodeList that comes back get the getElementsByClassName() call rather than retrieving items over again. All items in the nodeList that comes back from that function will exist:

With these changes and some other cleanup, the whole function would look like this:

<script type="text/javascript">
function getItems() {
    var items = document.getElementsByClassName("items");
    var total = 0;
    for (var i = 0; i < items.length; i++) {
        total += Number(items[i].value);
    }

    document.getElementById('tot').value = total;
    return total;
 }
 getItems();
 </script>

edited Nov 5, 2012 at 7:50

answered Nov 5, 2012 at 7:38

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

2 Comments

Elias Van Ootegem Over a year ago

Won't this still throw errors when the id doesn't exist? Number(null.value); is still incorrect

jfriend00 Over a year ago

@EliasVanOotegem - Since they didn't show their HTML, it's always hard to know exactly what assumptions can be made about their HTML. In anycase, I change the code to just iterate the itemCount nodeList which will all exist.

Pragnesh Chauhan · Accepted Answer · 2012-11-05 07:38:49Z

1

try this
DEMO

<input type='text' id='p1' class='items' value='10' />
<input type='text' id='p2' class='items' value='10' />
<input type='text' id='p3' class='items' value='10' />
<input type='text' id='p4' class='items' value='10' />
<input type='text' id='tot' value='' />

function getItems()
{
 var items = new Array();
 var itemCount = document.getElementsByClassName("items");
 var total = 0;
 var id= '';
 for(var i = 0; i < itemCount.length; i++)
 {
   id = "p"+(i+1);
   total = total +  parseInt(document.getElementById(id).value);
 }
document.getElementById('tot').value = total;
return total;
}
getItems();

edited Nov 5, 2012 at 7:38

answered Nov 5, 2012 at 7:30

Pragnesh Chauhan

8,49410 gold badges46 silver badges58 bronze badges

Comments

Dan Dascalescu · Accepted Answer · 2012-11-05 07:39:10Z

1

You need to convert from strings to numbers when you parse the value of the inputs, and from number to string when you build the p ids.

total = total + Number(document.getElementById(id).innerHTML);
var id = 'p'+String(i+1);

Here's working code, assuming paragraphs instead of input element: http://jsfiddle.net/dandv/HdwZm/1/

edited Nov 5, 2012 at 7:39

answered Nov 5, 2012 at 7:33

Dan Dascalescu

154k66 gold badges336 silver badges422 bronze badges

1 Comment

MJ Fathinia Over a year ago

The code might not be semantic, but it is right because he is using the length property in the for loop :D!

Collectives™ on Stack Overflow

Calculate the sum of values in input elements using JavaScript

4 Answers 4

Comments

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related