Display javascript variable in visualforce

Question

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>

Answer 1

Your getElementById is returning an undefined value, because apex:outputText doesn't actually output an element all the time. Instead, consider using a real element that you can target, such as:

<apex:facet name="footer">
    <span id="x">
        <apex:outputText value="{0, number, 0.00}">
            <apex:param value="{!grandTotal}"/>
        </apex:outputText>
    </span>
</apex:facet>

And then, for your JavaScript:

document.getElementById('x').innerHTML = total;

This should work because it's now just an ordinary HTML element.