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

を使用して既に要素を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を持つアイテムが1つ以上"p"+(i+1)存在しないようです。HTMLを表示しなかったので、それ以上具体的にすることはできません。

nodeListただし、からのアイテムの配列のようなリストがすでにあるので、getElementsByClassName()それらをもう一度取得する必要はありません。そのため、それを使用するようにコードをはるかに安全に書き直すことができます。また、getElementsByClassName()nullアイテムが返されないため、存在しないアイテムを参照しようとするのを防ぐことができます。他にもいくつかの問題があります。

  1. 文字列ではなく数値を加算するように、加算を行う前に結果を数値に変換する必要があります。

    合計=合計+数値（items [i] .value）;

  2. また、合計を割り当てた後に返品を行う必要があります。そうしないと、割り当ては実行されません。

    document.getElementById（'tot'）。value = total; 合計を返します。

  3. また、HTMLを表示しないため、実際に存在するアイテムがわからないため、getElementsByClassName()アイテムを取得するのではなく、呼び出しを取得する実際のnodeListを使用して、存在しないアイテムからコードを保護できます。また。その関数から返される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 に答える