IE6 displays JavaScript error for below given function and error is also mentioned below

I have a function

function setbid(catid)
{
if(catid == 30)
{

document.getElementById('bannerid').value = 1;

}
else if(catid == 31){
document.getElementById('bannerid').value = 2;
}
else if(catid == 32){
document.getElementById('bannerid').value = 6;
}
}

this function is being called onchange event of select box.

now when the value of select box is changed IE throws me an error saying

"document.getElementId(....)" is null or not an object..

Now what can i infer from this?

please help..

UPDATE

As per David's Reply how can i check for its existance before the assignment of value to that field,? Also other browsers do not display this error, I have this bannerid field as hidden field in the document... What should be done?

Below is the screen shot of the error displayed onchange of select box

Update 2 Update as per the answer of @haylem

<script>
function setbid(catid)
{
var lookup = {
    '30' : 1,
    '31' : 2,
    '32' : 6
  };

  if (lookup.hasOwnProperty(catid)) {
    var el = document.getElementById('bannerid');

    if (el) {
      el.value = lookup[catid];
    }
  }
/*if(catid == 30)
{
if(typeof(document.getElementById('bannerid')) == null ){
document.getElementById('bannerid').value = 1;
}
}
else if(catid == 31){
document.getElementById('bannerid').value = 2;
}
else if(catid == 32){
document.getElementById('bannerid').value = 6;
}*/
}
</script>

<div style="margin:0px auto">
<div class="instantprice-popup-bg">
<form name="instantpop" id="instantpop" action="" method="post" style="margin:0px; padding:0px" onsubmit="">
    <input type="hidden" name="sessid" id="sessid" value="<?php echo $_GET['osCsid'];?>">
<div class="instantprice">

            <ul>
                <li class="text12pt" style="color:#FF0000; display:none;" id="appsize">For special low price on sizes over 30ft. wide and 10ft. height contact us on sales@bannerbuzz.com.</li>
                <li class="text12pt" style="color:#FF0000; display:none;" id="vinylsize">Please enter width upto 30 ft & height upto 5 ft for Vinyl Signs/Decals(Posters).</li>

                <li class="col1">Select Product</li>
                <li class="col2">

                    <input type="hidden" name="price" id="price" value="<?php echo "15"; ?>" />
                    <input type="hidden" name="bannerid" id="bannerid" value="" />
                    <select name="product" class="dropdownfield" id="product" style="width: 180px;" onchange="javascript:setbid(document.getElementById('product').value);">
                    <option value="">Select Product</option>
                    <?php
                        while($result=mysql_fetch_object($sql_query))
                        {
                            ?><option value="<?php echo $result->categories_id;?>" <?php if($_POST['product'] == $result->categories_id) {?> selected="selected" <?php } ?>><?php echo $result->categories_name;?></option><?php 
                        }
                    ?>
                    </select>

                </li>
                <li class="col1">Select Size (in ft.)</li>
                <li class="col2">
                    <div class="sizebox" style="width:250px;">
                        <div class="sizebox col1"><input name="size_w" id="size_w" type="text" class="sizetextfield1" value="<?php if(isset($_REQUEST['size_w'])){ echo $_REQUEST['size_w']; } else { echo "2"; } ?>" ></div>
                        <div class="sizebox col2"><img src="images/homepage/up-arrow.jpg" width="12" height="9" border="0" align="top" onclick="increaseCounter('size_w')" /><img src="images/homepage/down-arrow.jpg" width="12" height="9" border="0" onclick="decreaseCounter('size_w');" /></div>
                        <div class="sizebox col3"  style="width:35px;">width</div>
                        <div class="sizebox col1"><input name="size_h" id="size_h" type="text" class="sizetextfield1" value="<?php if(isset($_REQUEST['size_h'])){ echo $_REQUEST['size_h']; } else { echo "2"; } ?>" style="margin-left:8px" ></div>
                        <div class="sizebox col2"><img src="images/homepage/up-arrow.jpg" width="12" height="9" border="0" align="top" onclick="inc开发者_C百科reaseCounter('size_h');" /><img src="images/homepage/down-arrow.jpg" width="12" height="9" border="0" onclick="decreaseCounter('size_h');" /></div>
                        <div class="sizebox col3" style="width:35px;">&nbsp;height</div>
                        <input name="size" id="size" type="hidden" value="<?php echo $_REQUEST['size_h'].'x'.$_REQUEST['size_w']; ?>">
                    </div>
                </li>
                <li class="col1">Select Quantity</li>
                <li class="col2">
                    <select id="qty" name="qty" >
                        <?php 
                            for($i=1;$i<=100;$i++)
                            {
                                ?> <option value="<?php echo $i;?>" <?php if($_POST['qty'] == $i) {?> selected="selected" <?php } ?>><?php echo $i;?></option> <?php
                            }
                        ?>
                    </select>
                </li>
                <li class="col1">Select Shipping</li>
                <li class="col2">
                    <select id="shipping_method" name="shipping_method" class="dropdownfield" >
                        <option value="">Select Shipping</option>
                        <option value="standard" <?php if($_POST['shipping_method'] == 'standard') {?> selected="selected" <?php } ?>>Standard (7 - 12 days from proof)</option>
                        <option value="expedited"<?php if($_POST['shipping_method'] == 'expedited') {?> selected="selected" <?php } ?>>Expedited (5 work days from Proof)</option>
                    </select>
                </li>
                <li class="col1" id="sidehead">Two Side Banner</li>
                <li class="col2" id="sideval">
                    <input type="checkbox" id="side" name="side" value="1"  />
                </li>
                <li class="col1">Product Price</li>
                <li class="col2"><span class="text15pt" id="total_display">$0</span>
                    <input type="hidden" id="total" name="total" class="textfield" value="15" readonly="readonly" style="width:60px;"/>
                </li>

                <li class="col1">Shipping Cost</li>
                <li class="col2"><span class="text15pt" id="shipping_display">$0</span>
                    <input type="hidden" id="shipping" name="shipping" class="textfield" value="" readonly="readonly" style="width:60px;" />
                </li>
                <li class="bannerprice" id="grand_total_display">TOTAL PRICE : $0

                </li><input type="hidden" id="grand_total" name="grand_total" value="" readonly="readonly" style="width:60px;" />
                <li style="float:none; text-align:center">

                    <input type="submit" class="getprice-btn" name="getprice" value="" />

                </li>
                <li class="text12pt">Final Price, No Hidden Charges</li>
            </ul>
            <input type="hidden" name="getpriceclick" value="1" />
        </div>
        </form>
</div>
</div>

Now what can i infer from this?

That there isn't an element with the id bannerid in the document.

Rewrite as:

function setbid(catid) {
  var lookup = {
    '30' : 1,
    '31' : 2,
    '32' : 6
  };

  if (lookup.hasOwnProperty(catid)) {
    var el = document.getElementById('bannerid');

    if (el) {
      el.value = lookup[catid];
    }
  }
}

And make sure that there is an element with the id attribute exactly written as bannerid.

The function I give you is slightly different than yours:

• using a lookup table to get values instead of if chains (especially if you will add values later)
• doing the element lookup in only one part of the code instead of duplicating it
• checking for the element's existence

EDIT for Update2:

Note directly relevant to your problem, but:

• You should rather but your script tag in your <head> section
• You should rather use progressive enhancement to react to events instead of mangling HTML and JavaScript code. Use event hooks instead.

Also check your the rendered page's source code to see if some elements were not eaten by the renderer because of a a malformation, or by your PHP code.

EDIT:

If I test with the following, it works perfectly fine:

<script>
function setbid(catid)
{
var lookup = {
    '30' : 1,
    '31' : 2,
    '32' : 6
  };

  if (lookup.hasOwnProperty(catid)) {
    var el = document.getElementById('bannerid');

    if (el) {
      el.value = lookup[catid];
      alert('done [' + el.value + ']');
    }
  }

}
</script>

<div style="margin:0px auto">
<div class="instantprice-popup-bg">
<form name="instantpop" id="instantpop" action="" method="post" style="margin:0px; padding:0px" onsubmit="">
    <input type="hidden" name="sessid" id="sessid" value="<?php echo $_GET['osCsid'];?>">
<div class="instantprice">

            <ul>
                <li class="text12pt" style="color:#FF0000; display:none;" id="appsize">For special low price on sizes over 30ft. wide and 10ft. height contact us on sales@bannerbuzz.com.</li>
                <li class="text12pt" style="color:#FF0000; display:none;" id="vinylsize">Please enter width upto 30 ft & height upto 5 ft for Vinyl Signs/Decals(Posters).</li>

                <li class="col1">Select Product</li>
                <li class="col2">

                    <input type="hidden" name="price" id="price" value="15" />
                    <input type="hidden" name="bannerid" id="bannerid" value="" />
                    <select name="product" class="dropdownfield" id="product" style="width: 180px;" onchange="javascript:setbid(document.getElementById('product').value);">
                    <option value="">Select Product</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="30">30</option>
                    <option value="31">31</option>
                    <option value="32">32</option>
                    </select></li>
            </ul>
            <input type="hidden" name="getpriceclick" value="1" />
        </div>
        </form>
</div>
</div>

So you have something screwing up your elements. I'd suspect something going wrong in your PHP code and producing a malformed output.

If the element does not exist on the DOM when this function is executed, the document.getElementById(...) will return null (or undefined).

Always best to use a script inspector (like FireBug or Safari console) while developing. If you must develop in IE6, you might want to inspect by incrementally "alert"ing.

Suggested debug output:

alert(document.getElementById);
alert(document.getElementById("bannerid"));
alert(document.getElementById("bannerid").value);

You just enable that hidden field and check whether that field has any value while browser's throws an error.

 <script type="text/javascript">
function notEmpty(){

    var myTextField = document.getElementById('myText');

    if(myTextField.value != "")
      {
        alert("You entered: " + myTextField.value)
            alert(document.getElementById('myText1').value=0);
      }
    else
        alert("Would you please enter some text?")      
}
</script>
<input type='text' id='myText' />
<input type='text' id='myText1' />
<input type='button' onclick='notEmpty()' value='click' />

Try this example