使用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;上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()不會返回null項。 還有一些其他問題：

1. 在進行添加之前，您需要將結果轉換為數字，因此您要添加數字，而不是字符串：

   total = total + Number（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>