Onchange textbox javascript with ASP.NET controls

<script language="javascript" type="text/javascript">

  function test() {

         debugger;

         var recipient = $("#txtTheoryHours");

         alert(recipient);

         var theoryHours = document.getElementById('<%=txtTheoryHours.ClientID %>').value == '' ? 0 : document.getElementById('<%=txtTheoryHours.ClientID %>').value;

         var practicalHours = document.getElementById('<%=txtPracticalHours.ClientID %>').value == '' ? 0 : document.getElementById('<%=txtPracticalHours.ClientID %>').value;

         var ojtHours = document.getElementById('<%=txtOJTHours.ClientID %>').value == '' ? 0 : document.getElementById('<%=txtOJTHours.ClientID %>').value;

         var genericNOSHours = document.getElementById('<%=txtGenericNOSHours.ClientID %>').value == '' ? 0: document.getElementById('<%=txtGenericNOSHours.ClientID %>').value;

         var nsqfReimburseCourseDuration = parseInt(theoryHours) + parseInt(practicalHours) + parseInt(ojtHours) + parseInt(genericNOSHours);

         document.getElementById('<%=txt_NSQFReimburseCourseDuration.ClientID %>').value = nsqfReimburseCourseDuration;

         document.getElementById('<%=txt_NSQFcourseDuration.ClientID %>').value = parseInt(theoryHours) + parseInt(practicalHours);

         

        // alert(theoryHours);

     }

</script>

<asp:TextBox ID="txtTheoryHours" runat="server" MaxLength="4"  placeholder="Enter theory hours"

                    CssClass="form-control" onchange="test()"  OnTextChanged="txtTheoryHours_textChanged" ></asp:TextBox>