使用JavaScript计算输入元素中的值的总和

Question

我正在尝试计算显示的许多输入的总和，以便制作发票。必须开具发票的所有产品都在我的数据库记录，和我写了这个JavaScript函数来计算总：

<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> 

的问题是，我得到Uncaught TypeError: Cannot read property 'value' of null上线total = total + document.getElementById("p"+(i+1)).value;

我真的不明白为什么，因为我所有的变量都被声明了。

Answer 1

你已经得到了元素使用getElementsByClassName，为什么你通过ID再次得到它？您可以尝试以下操作：

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();​ 

Answer 2

试试这个
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(); 

Answer 3

当你建立了p ID，您就需要从字符串转换为数字，当你分析的输入值，从数字符串。

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

这里的工作代码，假设段落，而不是输入元素：http://jsfiddle.net/dandv/HdwZm/1/

Answer 4

一个或多个与"p"+(i+1)的ID项目显然不存在。你没有向我们展示你的HTML，所以我们不能比这更具体。

但是，由于您已经有了一个nodeList，它是来自getElementsByClassName()的类似数组的列表，因此不需要再重复它们。因此，您可以更安全地重写代码以使用它，并且它还应该保护您免于试图引用不存在的项目，因为getElementsByClassName()不会返回空项目。也有一些其他的问题：

1. 你需要做的除了之前的结果，数字转换，所以你要添加的数字，而不是字符串：

   总=总+号（项目[I] 。值）;

2. 你也需要把返回后分配全部或分配将不会得到执行。

   的document.getElementById（“TOT”）值=总;总回报： ;

3. 而且，由于您没有向我们展示您的HTML，我们不知道实际存在哪些项目，因此您可以使用返回的实际nodeList获得getElementsByClassName()以保护您的代码不存在不存在的项目调用而不是再次检索项目。在从功能回来的节点列表所有项目将存在：

随着这些变化和其他一些清理，整个功能是这样的：

<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>