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"
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;


<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: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: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 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:facet name="footer">
                    <apex:outputText id="x" value="{0, number, 0.00}">
                        <apex:param value="{!grandTotal}"/>


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}"/>

And then, for your JavaScript:

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

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

  • I appreciate your response! I replaced my code with your code, and I'm still getting the "Cannot set property 'innerHTML' of null" error :/ – ad_rey Dec 19 '19 at 3:06
  • Oddly enough, if I throw the apex:span outside of the apex:form then it works. – ad_rey Dec 19 '19 at 3:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.