Error: overallTotal is null or not an object

Good day!

I’m not good in javascript, I encountered error in auto compute of Total Take Home Pay.
I want to happen is when i add other deduction also the take homepay will change.

Take home pay = totearn-totalded

I have this code:


<script type="text/javascript">

function autocalded(oText)
{
if (isNaN(oText.value)) //filter input
{
alert('Numbers only!');
oText.value = '';
}
var field, val, oForm = oText.form, TotalDed = a = 0;
for (a; a < arguments.length; ++a) //loop through text elements
{
field = arguments[a];
val = parseFloat(field.value); //get value
if (!isNaN(val)) //number?
{
TotalDed += val; //accumulate
}
}
var tot = Number(document.getElementById('TotEarn').value);
var totded=Number(TotalDed);
oForm.TotalDed.value = totded.toFixed(2);
var overallTotal = tot - totded;
oForm.overallTotal.value = overallTotal.toFixed(2);
oForm.TakeHomePay.value = overallTotal.toFixed(2); 
}
</script>


<div class="income">
<fieldset>
    <legend>EARNINGS</legend>
        <p class="serif">
        <label for = "Rate" class = "LLabel">Rate:</label>
        <input name= "Rate" class = "LField" type="text" maxlength="12" tabindex="0" size="12" value="{$Rate}" readonly="readonly" style="background: #CCCCCC">
        
        <label for = "Hours" class = "LLabel">&nbsp;Hours:</label>
        <input name= "Hours" class = "LField" type="text" maxlength="12" tabindex="0" size="12"  value="{$Hours}" readonly="readonly" style="background: #CCCCCC">
        </p>
        <p class="serif">
        <label for = "Amount" id = "AmountLabel">&nbsp;&nbsp;<b>Basic Pay:</b></label>
        <input name= "Amount" id="Amount" type="text" maxlength="12" tabindex="0" size="12" value="{$Amount}" readonly="readonly" style="background: #CCCCCC">
        </p>
    <div class="OT">
    <fieldset>
        <legend>OTHERS</legend>
        <p class="serif">
        <label class="p">Hours</label><label>&nbsp;&nbsp;&nbsp;&nbsp;Amount</label>
        <label for = "RegOT" class = "LLabelOT">Regular Overtime:</label>
          <input name= "RegOTHrs" class = "LFieldOT" type="text" maxlength="10" tabindex="0" size="10" value="{$OTReg_Hours}"/>
            <input name= "RegOTAmt" class = "LFieldOT" type="text" maxlength="10" tabindex="0" size="10" value="{$OTReg_Amt}" />
        <label for = "SunSpecHol" class = "LLabelOT">Sun/Spec Holiday:</label>
            <input name= "SunSpecHolHrs"  class = "LFieldOT" type="text" maxlength="10" tabindex="0" size="10" value="{$SunReg_Hours}"/>
            <input name= "SunSpecHolAmt"  class = "LFieldOT" type="text" maxlength="10" tabindex="0" size="10" value="{$SunReg_Amt}" />
        <label for = "SunSpecHolOt" class = "LLabelOT">Sun/Spec Hol. OT:</label>
            <input name= "SunSpecHolOtHrs"  class = "LFieldOT" type="text" maxlength="10" tabindex="0" size="10" value="{$OTSun_Hours}"/>
            <input name= "SunSpecHolOtAmt"  class = "LFieldOT" type="text" maxlength="10" tabindex="0" size="10" value="{$OTSun_Amt}" />
        <label for = "RegHol" class = "LLabelOT">Reg. Holiday:</label> 
            <input name= "RegHolHrs"  class = "LFieldOT" type="text" maxlength="10" tabindex="0" size="10" value="{$HolReg_Hours}"/>
            <input name= "RegHolAmt"  class = "LFieldOT" type="text" maxlength="10" tabindex="0" size="10" value="{$HolReg_Amt}" />
        <label for = "RegHolOt" class = "LLabelOT">Reg. Holiday OT:</label> 
            <input name= "RegHolOtHrs" class = "LFieldOT" type="text" maxlength="10" tabindex="0" size="10" value="{$HolRegOT_Hours}"/>
            <input name= "RegHolOtAmt" class = "LFieldOT" type="text" maxlength="10" tabindex="0" size="10" value="{$HolRegOT_Amt}"/>
        <label for = "HolLeave" class = "LLabelOT">Holiday/Leave:</label> 
            <input name= "HolLeaveHrs" class = "LFieldOT" type="text" maxlength="10" tabindex="0" size="10" value="{$HolLeave_Hours}"/>
            <input name= "HolLeaveAmt" class = "LFieldOT" type="text" maxlength="10" tabindex="0" size="10" value="{$HolLeave_Amt}"/>
        <label for = "NightPrem" class = "LLabelOT">Night Premium:</label> 
            <input name= "NightPremHrs" class = "LFieldOT" type="text" maxlength="10" tabindex="0" size="10" value="{$NP_Hours}"/>
            <input name= "NightPremAmt" class = "LFieldOT" type="text" maxlength="10" tabindex="0" size="10" value="{$NP_Amt}"/>
        <label for = "MealAllow" class = "LLabelOT">Meal Allowance:</label> 
            <input name= "MealAllowHrs"  class = "LFieldOT" type="text" maxlength="10" tabindex="0" size="10" value="{$Meal_Hours}"/>
            <input name= "MealAllowAmt"  class = "LFieldOT" type="text" maxlength="10" tabindex="0" size="10" value="{$Meal_Amt}"/>
        <label for = "COLA" class = "LLabelOT">COLA (P14 Allow):</label> 
            <input name= "COLAHrs" class = "LFieldOT" type="text" maxlength="10" tabindex="0" size="10" value="{$Cola_Hours} days"/>
            <input name= "COLAAmt" class = "LFieldOT" type="text" maxlength="10" tabindex="0" size="10" value="{$Cola_Amt}"/>
        <label for = "ThirteenMon" class = "LLabelOT">13th Month:</label> 
            <input name= "ThirteenMonHrs" class = "LFieldOT" type="text" maxlength="10" tabindex="0" size="10" value="{$Thirteenmonth_Hours} days"/>
            <input name= "ThirteenMonAmt" class = "LFieldOT" type="text" maxlength="10" tabindex="0" size="10" value="{$Thirteenmonth_Amt}"/>
        <label name= "TotEarn" class="LLabelTotEarn"><b>Total Earnings:</b></label><br/>
            <input name="TotEarn" id="TotEarn" class="LFieldOT" type="text" maxlength="12" tabindex="0" size="10" readonly="readonly" value="{$TotEarn}" style="background: #CCCCCC">       
        </p>                                   
    </fieldset>
</fieldset>
</div> 
</div>

<div class="deductions">
<fieldset>
<legend>DEDUCTIONS</legend>
    <p class="serif">
    <label for = "SSS" class = "LLabelDed">SSS:</label>
        <input name= "SSS" class = "LFieldDed" type="text" maxlength="10" tabindex="0" size="10" value="0" style="background: #e2e2e2" readonly="readonly" />
    <label for = "TAX" class = "LLabelDed">&nbsp;TAX:</label>
        <input name= "TAX" id="TAX" type="text" maxlength="10" tabindex="0" size="10" value="0" style="background: #e2e2e2" readonly="readonly" />
    <label for = "PCHL" class = "LLabelDed1">&nbsp;PCHL:</label>
        <input name= "PCHL" id="PCHL" type="text" maxlength="10" tabindex="0" size="10" value="0" style="background: #e2e2e2" readonly="readonly" />
    <label for = "HDMF" class = "LLabelDed2">HDMF:</label>
        <input name= "HDMF" id="HDMF"  type="text" maxlength="10" tabindex="0" size="10" value="0" style="background: #e2e2e2" readonly="readonly" />

    
<div class="loan">
<fieldset>
<legend>LOANS</legend>
<p class="serif">
<label for="SSSLoan" class="LLabelLoan">SSS Loan:</label>
    <input name= "SSSLoan" id="SSSLoan" class = "LFieldLoan" type="text" maxlength="10" tabindex="0" size="10" onkeyup="return autocalded(this, HDMFLoan, Fund, BurialSep, TaxAjt, CashAdvance, AdvancesShirt, AdvancesMed, AdvancesOthers)" value="{$SSSAmor}" style="background: #e2e2e2" />
<label for="HDMFLoan" class="LLabelLoan1">&nbsp;HDMF Loan:</label>
    <input name= "HDMFLoan" id="HDMFLoan" class = "LFieldLoan1" type="text" maxlength="10" tabindex="0" size="10" onkeyup="return autocalded(this, SSSLoan, Fund, BurialSep, TaxAjt, CashAdvance, AdvancesShirt, AdvancesMed, AdvancesOthers)" value="{$HDMFAmor}" style="background: #e2e2e2" />
<label for="Fund" class="LLabelLoan">Union/Trust Fund:</label>
    <input name= "Fund" id="Fund" class = "LFieldLoan" type="text" maxlength="10" tabindex="0" size="10" onkeyup="return autocalded(this, SSSLoan, HDMFLoan, BurialSep, TaxAjt, CashAdvance, AdvancesShirt, AdvancesMed, AdvancesOthers)" value="{$UDTAmor}" style="background: #e2e2e2" />          
</p>
</fieldset>

<div>
<fieldset>
<legend>OTHERS</legend>
<p class="serif">
<label for="BurialSep" class="LLabelLoan">Burial/Separation Cont:</label>
    <input name= "BurialSep" id="BurialSep" type="text" maxlength="10" tabindex="0" size="10" onkeyup="return autocalded(this, SSSLoan, HDMFLoan, Fund, TaxAjt, CashAdvance, AdvancesShirt, AdvancesMed, AdvancesOthers)" value="0" />
<label for="TaxAjt" class="LLabelLoan1">&nbsp;Tax Ajt:</label>
    <input name= "TaxAjt" id="TaxAjt" class = "LFieldLoan1" type="text" maxlength="10" tabindex="0" size="10" onkeyup="return autocalded(this, SSSLoan, HDMFLoan, Fund, BurialSep, CashAdvance, AdvancesShirt, AdvancesMed, AdvancesOthers)" value="0" />
<label for="CashAdvance" class="LLabelLoan">Cash Advance:</label>
    <input name= "CashAdvance" id="CashAdvance" class = "LFieldLoan" type="text" maxlength="10" tabindex="0" size="10" onkeyup="return autocalded(this, SSSLoan, HDMFLoan, Fund, BurialSep, TaxAjt, AdvancesShirt, AdvancesMed, AdvancesOthers)" value="0" />
<label for="AdvancesShirt" class="LLabelLoan1">&nbsp;Advances (Shirt):</label>
    <input name= "AdvancesShirt" id="AdvancesShirt" class = "LFieldLoan1" type="text" maxlength="10" tabindex="0" size="10" onkeyup="return autocalded(this, SSSLoan, HDMFLoan, Fund, BurialSep, TaxAjt, CashAdvance, AdvancesMed, AdvancesOthers)" value="0" />
<label for="AdvancesMed" class="LLabelLoan">Advances (Medical):</label>
    <input name= "AdvancesMed" id="AdvancesMed" class = "LFieldLoan" type="text" maxlength="10" tabindex="0" size="10" onkeyup="return autocalded(this, SSSLoan, HDMFLoan, Fund, BurialSep, TaxAjt, CashAdvance, AdvancesShirt, AdvancesOthers)" value="0" />
<label for="AdvancesOthers" class="LLabelLoan1">&nbsp;Advances (Other):</label>
    <input name= "AdvancesOthers" id="AdvancesOthers" class = "LFieldLoan1" type="text" maxlength="10" tabindex="0" size="10" onkeyup="return autocalded(this, SSSLoan, HDMFLoan, Fund, BurialSep, TaxAjt, CashAdvance, AdvancesShirt, AdvancesMed)" value="0" />    

</p>
</fieldset>
<p class="serif">
<label for="TotalDeductions" class="LLabelDeduction">&nbsp;<b>Total Deductions:</b></label>
    <input name= "TotalDed" id="TotalDed" class = "LFieldLoan" type="text" maxlength="10" tabindex="0" size="10" value="{$TotalDed}" style="background: #CCCCCC"/>   
</p >
</fieldset>  
</div>
</div>
<div>
<p class="serif">
<label for="TakeHomePay" class="LLabelTakeHomePay"><b>Take Home Pay:</b></label>
    <input name= "TakeHomePay" id="TakeHomePay" class = "LFieldLoan" type="text" maxlength="20" tabindex="0" size="10" value="{$THP}" style="background: #CCCCCC" />
    &nbsp;<input type="button" name="save" value="SAVE" onclick="savePay()">
</p>
</div>
</div>

Thank you so much