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