Cannot read property 'value' of null in this case

Question

I am trying to get the value of a text field in a VF page in Java Script. Below is my VF page.

<apex:page id="thepage" standardController="Opportunity" extensions="OpportunityExt">  
 <apex:form id="theform"> 


        <script type="text/javascript">
        function initialize(){ 
        alert('called' + document.getElementById("thePage:theform:atextId").value);
        }
        </script> 

          <apex:outputPanel id="inputId">
          <apex:commandLink id="saveBtn" onclick="initialize();" value="Search"/>
          </apex:outputPanel>
          <apex:outputPanel id="outputId">
             <apex:outputLabel value="{!$objecttype.Opportunity.fields.IsClosed__c.label}"/> 
             <apex:actionRegion >
               <apex:inputField value="{!Opportunity.IsClosed__c}" id="closedcheckboxId"/> 
             </apex:actionRegion> 
             <apex:outputLabel value="{!$objecttype.Opportunity.fields.OrderNumber__c.label}"/> 
             <apex:actionRegion >
               <apex:inputField value="{!Opportunity.OrderNumber__c}" id="atextId"/> 
             </apex:actionRegion>                          
          </apex:outputPanel>
  </apex:form> 


</apex:page>

When I click the link I get this error in the inspect window.

Cannot read property 'value' of null

I might be missing something here. I checked the path of the text field using inspect window and I saw:

<input id="thepage:theform:atextId" maxlength="8" name="thepage:theform:atextId" size="20" type="text" value="731645">

What am I missing here. Why do I get a null?

Answer 1

In this case, it was a simple typo: the ID value is cAsE-sEnSiTiVe.

    alert('called' + document.getElementById("thepage:theform:atextId").value);
                                       //        ^ This P was capitalized

Always make sure you're matching the case for your Id values.

As a more practical solution, consider using $Component:

    alert('called' + document.getElementById("{!$Component.thePage.theform.atextId}").value);

Using $Component will resolve the element Id correctly (in a case-insensitive manner) so you don't have to worry about it as much.