I'm trying to pute 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.
I'm trying to pute 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.
Share Improve this question edited Mar 21, 2013 at 7:08 Dan Dascalescu 152k64 gold badges332 silver badges419 bronze badges asked Nov 5, 2012 at 7:26 Stanislas PiotrowskiStanislas Piotrowski 2,69411 gold badges41 silver badges60 bronze badges 1-
It means
document.getElementById("p"+(i+1))returns null, no element with id"p"+(i+1)was found. – Musa Commented Nov 5, 2012 at 7:29
4 Answers
Reset to default 5You 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();
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 es back get the
getElementsByClassName()call rather than retrieving items over again. All items in the nodeList that es 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>
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();
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/dandv/HdwZm/1/