标记错误:document.getElementById(...)为null或不是对象

时间:2017-05-23 02:54:52

标签: javascript getelementbyid

我正在编写一个用于排序框的脚本。 这是我的问题。 在代码中:

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

似乎没有任何问题。

虽然这个:

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

将给出错误消息:document.getElementById(...)为null或不是对象。 如果我换到:

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>

1 个答案:

答案 0 :(得分:0)

您在代码中使用了i来处理两个不同的事情。首先作为输入元素id值的后缀,其次作为框的循环计数器。在各种循环完成后i不再等于1后,按后缀id查找的HTML元素将失败:

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

发生在

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

如果这是问题,请随意删除问题:D