We help IT Professionals succeed at work.

'document.getElementById(...)' is null or not an object

I have a script that makes a dynamic dropdown list and when an item is chosen that info (and qty=1) is passed along.  It works great in all browsers,  but in IE the dreaded little yellow triangle
Message: 'document.getElementById(...)' is null or not an object
It is occuring on line 52 I can bascially understand why, but how else can I set it to pass along the quantity
Becuase there are other things involved sub_products_qty_input does need to get set to one when the particular dropdown is chosen and stay 0 otherwise

$sub_price_array_str = '';
$n=0;
while ($sub_products = tep_db_fetch_array($sub_products_query)) {
  if ($sub_products['products_quantity'] > 0){
    $pf->loadProduct($sub_products['products_id'],$languages_id);
    $sub_dropdown[] = array('id' => $sub_products['products_id'],
                            'text' => substr( $sub_products['products_name'], strlen( $product_info['products_name'] . ' - ' )) 
                           );
    $sub_products_price[] = $pf->getPriceStringShort();
    $sub_products_blurb[] = cre_html2txt($sub_products['products_blurb']);
    $sub_products_image[] = tep_image(DIR_WS_IMAGES . $sub_products['products_image']);
    $sub_price_array_str .= "sub_price[" . $n . "]='<b>" . $pf->getPriceStringShort() . "</b>';" . "\n";
    $sub_products_blurb_array .= "sub_blurb[" . $n . "]='<br>" . cre_html2txt($sub_products['products_blurb']) . "<br>';" . "\n";
    $sub_products_image_array .= "sub_image[" . $n . "]='" . tep_image(DIR_WS_IMAGES . $sub_products['products_image']) . "';" . "\n";
    $n++;
  } 
}
?>
<tr>
  <td align="right"><table align="right" border="0">
    <tr>
      <td align="left" valign="top"><table align="right" border="0">
        <tr>
          <td align="center" valign="top"><div id="sub_products_image" class="main"><?php echo $sub_products_image[0];?></div></td>
          <td align="right" valign="top" class="productListing-data main"><?php if(defined('PRODUCT_INFO_SUB_PRODUCT_ATTRIBUTES') && PRODUCT_INFO_SUB_PRODUCT_ATTRIBUTES == 'True'){?><table width="100%"><?php $load_attributes_for = $sub_products['products_id']; include(DIR_WS_MODULES . 'product_info/product_attributes.php');?></table><br><?php } ?>
            <?php echo tep_draw_pull_down_menu('sub_products_id[]', $sub_dropdown , '', 'onchange="set_sub_price();" id="sub_products_id[]"');?>
            <div id="sub_products_blurb"><br><?php echo $sub_products_blurb[0];?><br></div>
          </td>
        </tr>
      </table></td>
      <td align="right" valign="top" class="main"><div id="sub_products_price" class="main"><b><?php echo $sub_products_price[0];?></b></div>
        <?php 
          echo tep_draw_hidden_field('sub_products_qty[]', '1','id="sub_products_qty_input"');?>
      </td>
    </tr>
  </table></td>
</tr>
<script type="text/javascript">
<!--
var sub_price = new Array() ;
<?php echo $sub_price_array_str; ?>
var sub_blurb = new Array() ;
<?php echo $sub_products_blurb_array; ?>
var sub_image = new Array() ;
<?php echo $sub_products_image_array; ?>

function set_sub_price() {
  selected_idx = document.getElementById('sub_products_id[]').selectedIndex;
  document.getElementById('sub_products_price').innerHTML=sub_price[selected_idx];
  document.getElementById('sub_products_blurb').innerHTML=sub_blurb[selected_idx];
  document.getElementById('sub_products_image').innerHTML=sub_image[selected_idx];
  document.getElementById('sub_add_check').checked = false;
  document.getElementById('sub_products_qty_input').value = 0;

}
function sub_add_chk() {
  sub_products_qty_input.value = (document.getElementById('sub_add_check').checked) ?  '1' : '0';

}
function check_qty() {
  if (document.getElementById('sub_products_qty[]').value > '0') {
    return true;
  } else {
    alert('<?php echo TEXT_ALERT_QTY; ?>');
    return false;
  }
}
//-->
</script>

Open in new window

Comment
Watch Question

In the code you have given i cannot find an element with an id of 'sub_add_check', i believe this is what the error is reffering to.
HonorGodSoftware Engineer

Commented:
If there is a possibility that the result of getElementById() is null, you should test the result before using it...


// Instead of:

document.getElementById('sub_add_check').checked = false;

// Try something like:

var add_check = document.getElementById('sub_add_check');
if ( add_check ) {
  add_check.checked = false;
}

Open in new window

there is no check box specifying  with this  id 'sub_add_check'

Author

Commented:
I understand there is no suck box, however with the code in the function sub_add_check is correctly setting sub_products_qty_input.value to 1 when the particular dropdown is selected and 0 if not, without these elements the code would pass every item with a quantity of 1 whether it was selected or not.  I am not sure how
sub_add_check & sub_products_qty_input are interacting, but they are and causing the correct result of having sub_products_qty[] = 0 when a particular drop down element is not selcted and 1 when it is.
Also only one element may be selected

Perhaps there is a cleaner way to make this happen that does not error (though it works) in IE

Author

Commented:
actuall i took out all reference to sub_add_check & sub_products_qty_input  and it works perfect
seems that was some useless legacy code that did not actually do anything