Cannot read property 'value' of null

Question

This is the code snippet where i am getting a javascript error :

" Uncaught TypeError: Cannot read property 'value' of null at hello (eval at _evaluateScript (3_3_3.Finalorg.ajax4jsf.javascript.AjaxScript:81), :3:45) at HTMLInputElement.onclick (Projects:1)"

I tried working with html input tag and it works fine

<apex:outputPanel  id="projectScreen"  >    
              <apex:pageBlock  rendered="{!showWhat=='NewProject'}" mode="enter code heremainDetail" Title="On-Boarding Project">
             <script>
             function hello() {
                 if(document.getElementById('{!$Component.test}').value != null)
                 alert('hello');
                 console.log(ab);
             }
             </script>
                <apex:pageBlockSection columns="3"  rendered="{!showSection}" >
                    <apex:pageBlockSectionItem>
                    <apex:outputLabel >Select Template</apex:outputLabel>
                    <apex:inputField id="test" value="{!templateSelection.On_Boarding_Template__c}" />    
                    </apex:pageBlockSectionItem>
                    <apex:commandButton onclick="hello();"  value="Continue" reRender="projectScreen" />

Answer 1

You might have better luck using the ends with selector:

document.querySelector("[id$='test']").value

Or better yet, use style classes:

<apex:inputField styleClass="testInput" ... />

<script>
      var inputValue = document.getElementsByClassName('testInput')[0].value;
 </script>

---

As for why what you have doesn't work, you have to reference all the parent tags as well. If they don't have id attributes specified, it's more of a pain and not worth the trouble in my opinion, hence the above recommendations. Have a look at the Visualforce Developer Guide (emphasis mine):

Using $Component to Reference Components from JavaScript

Use the $Component global variable to simplify referencing the DOM ID that is generated for a Visualforce component, and reduce some of the dependency on the overall page structure.

Every Visualforce tag has an id attribute. The id attribute for a tag can be used by another tag to bind the two tags together. For example, the <apex:outputLabel> tag’s for attribute can be used with the <apex:inputField> tag’s id attribute. The reRender and status attributes on , <apex:actionSupport>, and other action-oriented components also use the value of the id attribute from other components.

In addition to being used to bind Visualforce components together, this ID is used to form part of the document object model (DOM) ID for the component when the page is rendered.

To refer to a Visualforce component in JavaScript or another Web-enabled language, you must specify a value for the id attribute for that component. A DOM ID is constructed from a combination of the id attribute of the component and the id attributes of all components that contain the element.

See also:

Best Practices for Accessing Component IDs

To refer to a Visualforce component in JavaScript or another Web-enabled language, you must specify a value for the id attribute for that component. A DOM ID is constructed from a combination of the id attribute of the component and the id attributes of all components that contain the element.

Use the $Component global variable to simplify referencing the DOM ID that is generated for a Visualforce component, and reduce some of the dependency on the overall page structure. To reference a specific Visualforce component’s DOM ID, add a component path specifier to $Component, using dot notation to separate each level in the component hierarchy of the page. For example, use $Component.itemId to reference a component at the same level in the Visualforce component hierarchy, or use $Component.grandparentId.parentId.itemId to specify a more complete component path.

A $Component path specifier is matched against the component hierarchy: At the current level of the component hierarchy where $Component is used; and then At each successive higher level in the component hierarchy, until a match is found, or the top-level of the component hierarchy is reached.

Answer 2

You cannot access the component like that since the parent elements do not have ids.

Attempt to get element and then check for'undefined' before attempting to get the value.

<apex:page standardcontroller="Account" id="thePage">

<apex:form id="theForm">
    <apex:pageBlock id="theBlock">
        <apex:pageBlockSection id="theSection" columns="3">
            <apex:pageBlockSectionItem id="theItem">
                <apex:outputLabel >Select Template</apex:outputLabel>
                <apex:inputField id="test" value="{!Account.Name}" />    
            </apex:pageBlockSectionItem>
        </apex:pageblockSection>
        <button onclick="hello();" type="button">Click me</button>
    </apex:pageBlock>
</apex:form>

    <script>
         function hello() {
             var ele = document.getElementById('{!$Component.theForm.theBlock.theSection.theItem.test}')

             if(ele && ele.value.length > 0)
                 alert('hello');

             console.log(ele);
         }
         </script>

</apex:page>

Better yet, use the option Adrian suggested as it is easier to find the component.