How to get picklist component Id and value inside javascript function

Question

I want to get component Id and value of a picklist in VF page, based on the value selected in picklist, other input field value needs to be populated with 'Yes' or 'No', Since this needs to happen on the fly, i am uing javaScript function that reads the value selected and sets another field value, While i am getting through this for number and text type of fields, i am getting the following error for picklist field

Uncaught TypeError: Cannot read property 'undefined' of undefined

My sample code:

...

<apex:pageBlockSection title="PI"> 
   <apex:pageblockTable value="{!piList }" var="pi">
        <apex:column headerValue="Item Type">
            <apex:inputField id="it" value="{!pi.ItemType__c}" onchange="checkWeight()"/>
        </apex:column>
        <script>
             function checkWeight() 
             {
                 var item = document.getElementById('{!$Component.it}').value;
                 var opt = item.options[item.selectedIndex].value;
                 console.log('item selected: ' + item.options[item.selectedIndex].value);
                 var LiteWeight;
                 if (opt == 'ABC') {
                     LiteWeight = 'Yes';
                 }
                 else if(opt == 'XYZ') {
                     LiteWeight = 'No';
                 }
                 <!-- 8 more else if condition -->
                 document.getElementById('{!$Component.ltWt}').innerHTML= LiteWeight;                                        
             }                                                                              
        </script>
        <apex:column id="ltWt" headerValue="Lite Weight?">
           <apex:outputText value=""/> 
        </apex:column>
    ...

Can someone please help? Thanks for your time.

Answer 1

Here is a working example of taking a value from an input field in a row and setting that value in another part of the row that you can base your code on:

<apex:page standardController="Account" recordSetVar="accounts">

<apex:form>
    <apex:pageBlock >
        <apex:pageBlockTable value="{! accounts }" var="a">
            <apex:column>
                <apex:inputField id="source"
                        value="{! a.AccountSource }"
                        onchange="handleChange('{! $Component.source }', '{! $Component.destination }')"/>
            </apex:column>
            <apex:column>
                <apex:outputText id="destination" value="{! a.Name }"/>
            </apex:column>
        </apex:pageBlockTable>
    </apex:pageBlock>
</apex:form>

<script>
function handleChange(sourceId, destinationId) {
    console.log('sourceId=' + sourceId);
    console.log('destinationId=' + destinationId);
    var v = document.getElementById(sourceId).value;
    document.getElementById(destinationId).innerHTML = v;
}
</script>

</apex:page>

This avoids lots of copies of the JavaScript but does ensure that the unique Id values for the rows (distinguished by a row index number) are correct producing e.g. log output of:

sourceId=j_id0:j_id1:j_id2:j_id3:2:source
destinationId=j_id0:j_id1:j_id2:j_id3:2:destination

by keeping the $Component evaluations inside the table.