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

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

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

您需要在添加之前将结果转换为数字，这样您才能添加数字，而不是字符串：

total = total + Number（items [i] .value）;
您还需要在分配总数后输入，否则分配将无法执行：

document.getElementById（'tot'）。value = total; 返回总数;
并且，由于您没有向我们展示您的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>

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

4 个答案: