2

我正在尝试计算显示的许多输入的总和，以便开具发票。所有必须开票的产品都是我数据库中的记录器，我编写了这个 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;

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

4

4 回答 4

5

您已经通过 using 获得了元素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();​
于 2012-11-05T07:43:31.810 回答
2

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

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

  1. 您需要在添加之前将结果转换为数字，以便添加数字，而不是字符串：

    总计 = 总计 + 数量（items[i].value）；

  2. 您还需要在分配总计之后放置回报，否则分配将不会被执行：

    document.getElementById('tot').value = total; 返回总计；

  3. 而且，由于您没有向我们展示您的 HTML，我们不知道实际存在哪些项目，因此您可以通过使用返回的实际 nodeList 来保护您的代码免受不存在的项目的影响，getElementsByClassName()而不是检索项目再次。从该函数返回的 nodeList 中的所有项目都将存在：

通过这些更改和其他一些清理，整个函数将如下所示：

<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>
于 2012-11-05T07:38:45.447 回答
1

试试这个
演示

<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();
于 2012-11-05T07:30:36.190 回答
1

解析输入值时需要将字符串转换为数字，构建pid 时需要将数字转换为字符串。

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

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

于 2012-11-05T07:33:12.023 回答