Asher Sommer Asher Sommer - 2 years ago 60
Javascript Question

Markup error: document.getElementById(...) is null or not an object

I am working on a Script for sorting boxes.
Here my problem.
In the code:

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

seems to work without any problem.

While this one:

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

will give me the error message: document.getElementById(...) is null or not an object.
if I change to:

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

It all works, but then I cannot loop the file later and why does it work with i above?

My script below:

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
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);
document.getElementById('Size_XS'+i).value = Size_XS;
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;
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;
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;


I'm getting my values from here in the HTML code:

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

Answer Source

You have used i for two different things in the code. Firstly as a suffix to input element id values, and secondly as a loop counter for boxes. After i is no longer equal to 1 after various loops complete, the HTML element lookup by suffixed id fails:

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

occurs after

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

Feel free to delete the question if this is the problem :D

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download