Uncaught TypeError: Cannot set property 'value' of null

Question

I am trying to pre-populate text field with some value as soon as the Visualforce page loads. I am not sure why I am getting an error

Uncaught TypeError: Cannot set property 'value' of null

I made sure to put the Ids in proper case. Please help me out here guys.

<script type="text/javascript">
    document.getElementById("{!$Component.theForm.pbMain.pbS1.atextId}").value = '@abc.com';

</script>

<apex:form id="theForm">
    <div align = "center">
        <apex:image id="logo1" value="{!$Resource.Package}" width="200" />
    </div> 

    <apex:pagemessages />
    <!-- To display error messsages -->
    <apex:pageBlock  rendered="{!togglePb}" id="pbMain">
        <apex:pageBlockSection id="pbS1">
            <apex:input type="email" value="{!strEmail}" required="true" label="Email me package.xml" id="atextId"/>
            <apex:inputFile value="{!csvFileBody}"  filename="{!fileName}" accept=".csv" />
        </apex:pageBlockSection>
        <div align="center" draggable="false" >
            <apex:commandButton value="Generat Package.xml" action="{!importCSVFile}" />
        </div>
    </apex:pageBlock>
</apex:form>

Answer 1

your DOM element document.getElementById('{!$Component.theForm.pbMain.pbS1.atextId}') is coming null. Because NULL does not have a property name 'value' it throws error.