I can't figure out how to display the "total" javascript variable in the apex:facet section of the Visualforce page. I keep getting "Cannot set property 'innerHTML' of null" as the javascript error.
<apex:page lightningStylesheets="true"
docType="html-5.0"
standardController="Purchase_Order_Line__c"
extensions="createVendorInvoice"
recordSetVar="POLines"
action="{!retreiveLines}">
<script>
function calculateTotal(qId, pId, tId) {
var q = document.getElementById(qId).value;
var p = document.getElementById(pId).value;
var t = q * p;
document.getElementById(tId).innerHTML = t.toFixed(2);
var subtotals = document.getElementsByClassName('subTotalCol');
var total = 0;
for(var i = 0; i < subtotals.length; i++)
{
total += parseInt(subtotals.item(i).innerHTML);
}
document.getElementById('{!$Component.form.table.x}').innerHTML = total;
console.log(total);
}
</script>
<apex:form id="form">
<apex:pageBlock title="Create Vendor Invoice from PO Lines" id="table">
<apex:pageBlockButtons >
<apex:commandButton action="{!Cancel}" value="Cancel"/>
<apex:commandButton action="{!createVendorInvoice}" value="Submit"/>
</apex:pageBlockButtons>
<apex:variable var="grandTotal" value="{!2}"/>
<apex:pageBlockTable value="{!selectedLines}" var="line">
<apex:column value="{!line.Name}"/>
<apex:column value="{!line.Product__c}"/>
<apex:column value="{!line.Order_Quantity__c}"/>
<apex:column value="{!line.Open_Quantity__c}"/>
<apex:column value="{!line.Quantity_Received__c}"/>
<apex:column headerValue="Quantity">
<apex:inputField value="{!line.Set_Invoice_QTY__c}" id="q" style="width:40px" required="false"
onchange="calculateTotal('{!$Component.q}', '{!$Component.p}', '{!$Component.t}')">
<apex:actionSupport event="onChange" reRender="x"/>
</apex:inputField>
</apex:column>
<apex:column headerValue="Unit Price">
<apex:inputField value="{!line.Unit_Cost__c}" id="p" style="width:80px" required="false"
onchange="calculateTotal('{!$Component.q}', '{!$Component.p}', '{!$Component.t}')"/>
</apex:column>
<apex:column headerValue="Line Total">
<apex:outputText id="t" style="width:80px" value="{0, number, 0.00}" styleClass="subTotalCol">
<apex:param value="{!line.Set_Invoice_QTY__c * line.Unit_Cost__c}"/>
</apex:outputText>
<apex:facet name="footer">
<apex:outputText id="x" value="{0, number, 0.00}">
<apex:param value="{!grandTotal}"/>
</apex:outputText>
</apex:facet>
</apex:column>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:form>