This is my first VF page and I am trying to get it to change the Total Price field when Quanity is changed.  From what I have seen I can do this with JavaScript.  I have added it to my VF but I must be missing a step that doesn't kick off the JavaScript. 

The code pulls a list of data to allow my users to edit the Quantiy and Unit Price, but if I figure out Quantity then Unit Price will be the same process.

VF Page Code:

<apex:page Controller="dataListCon1" id="thePage">
<script type="text/javascript">
  function updateTotalPrice(){
     Quantity=document.getElementById("Quantity").value;
    unitprice = document.getElementById("UnitPrice").value;
    document.getElementById("TotalPrice").value = Quantity * unitprice ;
  }
</script>

<apex:form id="Selling">
<apex:pageBlock title="Mass Edit" mode="edit">
            <apex:pageBlockButtons >
                <apex:commandButton action="{!save}" value="Save"/>
                <apex:commandButton value="Cancel" action="{!cancel}"/>
            </apex:pageBlockButtons>
              <apex:pageBlockTable value="{!ypItems}" var="yp" id="theTable" rowClasses="odd,even" styleClass="tableClass">
            <apex:facet name="caption">table caption</apex:facet>
                <apex:column >
                      <apex:facet name="header">Name</apex:facet>
                      <apex:outputText value="{!yp.name}"/>
                </apex:column>
                <apex:column >
                      <apex:facet name="header">Product Name</apex:facet>
                      <apex:outputText value="{!yp.yptrimble__Product__r.Name}"/>
                </apex:column>
                <apex:column >
                        <apex:facet name="header">Quantity</apex:facet>
                        <apex:inputField id="Quantity" value="{!yp.yptrimble__Quantity__c}" required="true" rendered="true" onchange="updateTotalPrice('{!$Component.UnitPrice}','{!yp.yptrimble__Total_Price__c}','{!$Component.Quantity}'));"/>
                </apex:column>
                <apex:column >
                        <apex:facet name="header">Unit Price</apex:facet>
                        <apex:inputField id="UnitPrice" value="{!yp.yptrimble__Unit_Price__c}" required="true" />
                </apex:column>
                <apex:column >
                        <apex:facet name="header">Total Price</apex:facet>
                        <apex:outputText id="TotalPrice" value="{!yp.yptrimble__Total_Price__c}"/>
                </apex:column>
                <apex:column >
                        <apex:facet name="header">Service Date</apex:facet>
                        <apex:outputText value="{!yp.yptrimble__Service_Date__c}"/>
                </apex:column>
         </apex:pageBlockTable>
       </apex:pageBlock>
   </apex:form>
</apex:page>

Here is the controller:

public with sharing class dataListCon1 {

    public dataListCon1() {

    }
        List<yptrimble__Quote_Line_Item__c> ypItems;
        
        public List<yptrimble__Quote_Line_Item__c> getYpitems()
        {
            if(ypItems== null) ypItems= [select name,id,YPTRIMBLE__QUANTITY__C,YPTRIMBLE__SERVICE_DATE__C,
                    a.YPTRIMBLE__TOTAL_PRICE__C,a.YPTRIMBLE__UNIT_PRICE__C, a.YPTRIMBLE__PRODUCT__C, yptrimble__Product__r.Name
                    from yptrimble__Quote_Line_Item__c as a
                    where a.YPTRIMBLE__QUOTE__C =:ApexPages.currentPage().getParameters().get('Id')];
            return ypItems;
        }
        
        public PageReference save()
        {
          Update ypItems;
          PageReference pageRef = new PageReference('https://cs17.salesforce.com/' + ApexPages.currentPage().getParameters().get('Id'));
          return pageRef;
        }
      
        public PageReference cancel()
     {
            PageReference pageRef = new PageReference('https://cs17.salesforce.com/' + ApexPages.currentPage().getParameters().get('Id'));
            return pageRef;
    }
}