マークアップエラー：document.getElementById（...）がnullまたはオブジェクトではありません

Question

私はソートボックスのスクリプトを作成しています。 ここに私の問題。コードで ：

Size_XS  = document.getElementById('Size_XS'+i).value*1; 

は問題なく動作するようです。この1ながら

：のdocument.getElementById（...）が対象nullであるかどうか：

document.getElementById('Size_XS'+i).value = Size_XS; 

は私にエラーメッセージが表示されます。 私は変更する場合：

document.getElementById('Size_XS1').value = Size_XS; 

それはすべての作品が、その後、私はなぜそれが上記の私では動作しないファイルではなく、後のループとすることができますか？以下

マイスクリプト：

function calcbox(){ 
var count  = document.getElementById('count').value*1; 

count   = count+1; 

var box_num  = 0; 

var header  = "<table style='border:#000 1px solid; background-color:#fff;'><tr><td width='25'><b>Box</b></td><td width='200'><b>Item name</b></td><td width='100'><b>Sizes</b></td><td width='250'><b>Pcs</b></td></tr>"; 

var output  = header+document.getElementById('output').innerHTML; 
var total_qty; 
var box_qty; 
var item_name; 

var Size_XS=0; 
var Size_S=0; 
var Size_M=0; 
var Size_L=0; 

/*for(var i=1;i<count;i++){*/ 


var i=1; 
total_qty = document.getElementById('total_qty'+i).value*1; 
box_qty  = document.getElementById('box_qty'+i).value*1; 
item_name = document.getElementById('item_name'+i).value; 

Size_XS  = document.getElementById('Size_XS'+i).value*1; 
Size_S  = document.getElementById('Size_S'+i).value*1; 
Size_M  = document.getElementById('Size_M'+i).value*1; 
Size_L  = document.getElementById('Size_L'+i).value*1; 

//Packing whole boxes 
if(Size_XS>=box_qty){ 
    var Box_count = parseInt(Size_XS/box_qty); 

    for(var i=1;i<=Box_count;i++){ 
     box_num = box_num+1; 
     output = output+"<tr><td>"+box_num+"</td><td>"+item_name+"</td><td>S</td><td>"+box_qty+"</td></tr>";  
    } 
    Size_XS = Size_XS-(box_qty*Box_count); 
    alert(Size_XS); 
    document.getElementById('Size_XS'+i).value = Size_XS; 
} 
if(Size_S>=box_qty){ 
    var Box_count = parseInt(Size_S/box_qty); 

    for(var i=1;i<=Box_count;i++){ 
     box_num = box_num+1; 
     output = output+"<tr><td>"+box_num+"</td><td>"+item_name+"</td><td>S</td><td>"+box_qty+"</td></tr>";   
    } 
    Size_S = Size_S-(box_qty*Box_count); 
    document.getElementById('Size_S'+i).value = Size_S; 
} 
if(Size_M>=box_qty){ 
    var Box_count = parseInt(Size_M/box_qty); 

    for(var i=1;i<=Box_count;i++){ 
     box_num = box_num+1; 
     output = output+"<tr><td>"+box_num+"</td><td>"+item_name+"</td><td>M</td><td>"+box_qty+"</td></tr>"; 
    } 
    Size_M = Size_M-(box_qty*Box_count); 
    document.getElementById('Size_M'+i).value = Size_M; 
} 
if(Size_L>=box_qty){ 
    var Box_count = parseInt(Size_L/box_qty); 

    for(var i=1;i<=Box_count;i++){ 
     box_num = box_num+1; 
     output = output+"<tr><td>"+box_num+"</td><td>"+item_name+"  </td><td>L</td><td>"+box_qty+"</td></tr>"; 
    }  
     Size_L = Size_L-(box_qty*Box_count); 
     document.getElementById('Size_L'+i).value = Size_L; 
    } 
document.getElementById("output").innerHTML = output+"</table>"; 
document.getElementById("qty_boxes").value = box_num; 

show('Volume_weight'); 
} 

私はここにHTMLコード内からの私の値を取得しています：

<table> 
<tr> 
<td width="10">1</td> 
<td width="120"><input id="item_name1" type="text" style="width:100px;" /></td> 
<td width="80"><input id="box_qty1" type="text" style="width:30px;" /></td> 
<td width="40"><input id="Size_XS1" type="text" style="width:30px;" onchange="totcalc(1);" /></td> 
<td width="40"><input id="Size_S1" type="text" style="width:30px;" onchange="totcalc(1);" /></td> 
<td width="40"><input id="Size_M1" type="text" style="width:30px;" onchange="totcalc(1);" /></td> 
<td width="40"><input id="Size_L1" type="text" style="width:30px;" onchange="totcalc(1);" /></td> 
<td width="60"><input id="total_qty1" type="text" style="width:50px;" /></td> 
</tr> 
</table> 

Answer 1

あなたは、コード内の2つの異なるもののためiを使用していました。第1に入力要素のid値の接尾辞として、第2にボックスのループカウンタとして使用されます。 iが完了し、様々なループの後にはもはや1と等しくなった後、接尾IDによるHTML要素の検索は失敗しません：

for(var i=1;i<=Box_count;i++){ // ... 

は、これが問題であれば、質問を削除すること自由に感じた後

document.getElementById('Size_XS'+i).value = Size_XS; 

が発生します。 D