CODEWITHSUNDEEP
javascript
King of kings
King of kings

Reputation: 695

element id is not accessible javascript

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?

Upvotes: 3

Views: 924

Answers (2)

surfmuggle
surfmuggle

Reputation: 5954

As far as i understood your question and with the code provided you are wondering

  • why your global variables appear not to work ddlpf and disp_msg is not working inside pos_valid and message functions

You have to make sure that the global variables are declared before any function is using them. Another option would be to pass in the variables.

In my demo on codepen you can see that it works. This html

<h2>Element id is not accessible</h2>

<select id="ddlpf">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
<button onclick=btn_proceed_Click()>proceed</button>
<div id="disp_msg">

</div>

and this javascript

var ddlpf=document.getElementById('ddlpf');  
var disp_msg=document.getElementById('disp_msg');  
function btn_proceed_Click()  
{     
   if(pos_valid()==true)  
   {
       var btn = document.getElementById('btn');  
       btn.innerHTML='success';  
   };
}

function pos_valid()  
{  
   var pos_valid=false;  
   var ses, ccy, ccy1, ccy2, as11costbud;  
   var selectedIndex = ddlpf.selectedIndex
   if(selectedIndex <= 0)  
   {  
     message("Please select the Portfolio. Your selection:" + selectedIndex);  
       return;  
   }  
  message("Your selection" + selectedIndex);  
   pos_valid=true;  
   return pos_valid;  
}

function message(msg)  
{  
    disp_msg.innerHTML=msg;  
}

If you provide more information erromessages from chrome dev tools we can help better.

Upvotes: 1

aravind
aravind

Reputation: 2877

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.

Upvotes: 1

Related Questions