JAVASCRIPT Why is this causing an error

This javascript works fine.it does what I want it to do. it puts a boarder around a table etc. but I am still getting an error in the firefox console saying that addressTable, AddressSpan AddressShort... are null or not defined. everything seems to be working but the error at the bottom of the screen is annoying I don't want to see it there

Error

document.getElementById("addressTable") is null [Break On This Error] document.getElementById("addressTable").style.borderStyle="solid";

Script

<script language="javascript" type="text/javascript">
var isDroppedDown= 0 ;
function dropDown(){
        var myTable = document.getElementById("bgImgBlue");
        var sideImage = document.getElementById("sideImage");


        parent.document.getElementById('frameMain').rows = '173,*';
        isDroppedDown = 1;
        myTable.height = 100;
        sideImage.height = 100;
        document.getElementById("bgImgBlue").style.backgroundImage="url('images/i_frame_bgnavBig.gif')";
        document.getElementById("sideImage").height = 172;
        document.getElementById("addressTable").style.borderStyle="solid";
        document.getElementById("addressTable").style.bo开发者_StackOverflow社区rderWidth="1px";
        document.getElementById("addressSpan").style.paddingTop="";
        document.getElementById("addressShort").style.visibility = 'hidden';
        document.getElementById("ContactSpanFull").style.paddingTop="";
        document.getElementById("ContactSpan").style.paddingTop="";
        document.getElementById("ContactSpan").style.visibility = 'hidden'
        document.getElementById("contactTable").style.borderStyle="solid";
        document.getElementById("contactTable").style.borderWidth="1px";
 }

 function dropDownUp(){
        var myTable = document.getElementById("bgImgBlue");
        var sideImage = document.getElementById("sideImage");

        parent.document.getElementById('frameMain').rows = '84,*';
        isDroppedDown = 0;
        myTable.height = 84;
        sideImage.height = 160;
        document.getElementById("bgImgBlue").style.backgroundImage="url('images/i_frame_bgnav.gif')";
        document.getElementById("bgImgBlue").style.backgroundImage="url('images/i_frame_bgnav.gif')";
        document.getElementById("sideImage").height = 79;
        document.getElementById("addressTable").style.borderStyle="";
        document.getElementById("addressTable").style.borderWidth="";
        document.getElementById("addressSpan").style.paddingTop="30px";
        document.getElementById("addressShort").style.visibility = 'visible';
        document.getElementById("ContactSpan").style.visibility = 'visible'
        document.getElementById("ContactSpanFull").style.paddingTop="30px";
        document.getElementById("contactTable").style.borderWidth="0px";
 }

function dropdownResize(){

    if(isDroppedDown == 0){     
        dropDown();
    }
    else{
        dropDownUp();
        }
}


</script>

Check for exact spelling and capitalization of your IDs.

I notice in your question you refer to AddressSpan AddressShort, while in your code you use addressSpan addressShort.

Any variation in the ID will cause the selection to fail.

I notice also that in your code, sometimes you capitalize the first letter of your IDs, and sometimes not. You may want to standardize this.

This javascript might be executing before the DOM is ready - that is - before the page has finished loading the HTML.

If that's the case it won't find any of the getElementById items.. however, if you're only getting the error on those elements, the likely explanation is that they haven't been placed in the DOM at the time of execution.

Or they don't exist