element id is not accessible javascript

Question

i have the following code. here i am declaring all the element id's to variables as global before all the functions declared. but those variables are taken by the functions below is the sample:

var ddlpf=document.getElementById('<%=ddlpf.ClientID%>');  
var disp_msg=document.getElementById('<%=disp_msg.ClientID%>');  
function btn_proceed_Click()  
{  
   var ses='<%=Session("hcur").toString %>';  
   if(pos_valid()==true)  
   alert('success');  
}

function pos_valid()  
{  
   var pos_valid=false;  
   var ses;  
   var ccy;  
   var ccy1;  
   var ccy2;  
   var as11costbud;  
   ses='<%=Session("hcur").toString %>';  
   var bm='<%=Session("benchmark").toString %>';  
   var dtsheet='<%=Session("dtsheet").toString %>';  
   var ratedis='<%=Session("ratedis").toString %>';  
   if(ddlpf.selectedIndex <= 0)  
   {  
       message("Please select the Portfolio");  
       return;  
   }  
   pos_valid=true;  
   return pos_valid;  

}

function message(msg)  
{  
    disp_msg.innerHTML=msg;  
    var modalPopupBehaviorCtrl = $find('modalpop');              
    modalPopupBehaviorCtrl.set_PopupControlID("poppan");    
    modalPopupBehaviorCtrl.show();   
}

If i declare the variable "ddlpf" inside the pos_valid() and "disp_masg" inside the message(), it works. the code is like this:

function pos_valid()      
{        
    var ddlpf=document.getElementById('<%=ddlpf.ClientID%>');      
    //code    
}

function message()       
{    
    var disp_msg=document.getElementById('<%=disp_msg.ClientID%>');     
    //code    
}    

but these id's are common to 5 functions. not only this two. i have 20 id's which are common to 5 big functions. thats why i have declared them outside the functions.

what change should i make?

Answer 1

I am guessing you are putting the script at the top of the HTML page. So the page has not finished loading yet and you are trying to access the document.getElementById even before the document.body is ready. So when you access them in your functions, the variables value will be undefined => your problem

Try it this way,

var ddlpf;  
var disp_msg;  

window.onload = function(){
    ddlpf=document.getElementById('<%=ddlpf.ClientID%>');  
    disp_msg=document.getElementById('<%=disp_msg.ClientID%>');  
}

This way, you can put the code anywhere.