Client Side calculation not working

Question

I have a 5 x 5 table of check boxes and, depending what the user selects, costs are calculated (it's a bit more complicated but you get the idea :o). I would like to do the calculation using client side JavaScript (it is a non critical internal XPages app) but cannot seem to update the values on the screen. I have created a simple form to try and get the JavaScript working - here is what I have:

1. A form that just has one field on it -> "count" of type number

2. An XPage with the following code:

<xp:this.resources>
    <xp:script src="/jsTest.js" clientSide="true"></xp:script>
</xp:this.resources>
<xp:this.data>
    <xp:dominoDocument var="document1" formName="x. Test"></xp:dominoDocument>
</xp:this.data>
<xp:panel style="padding-bottom:60.0px;padding-top:60.0px">
    <div class="container">

        <legend>Test</legend>
        <div class="row">
            <label class="col-md-4 control-label">Nachname</label>
            <div class="col-md-8">
                <xp:checkBox text="test checkbox" id="checkBox1">
                    <xp:eventHandler event="onclick" submit="false">
                        <xp:this.script>
                            <xp:executeClientScript script="updateCount ();"></xp:executeClientScript>
                        </xp:this.script>
                    </xp:eventHandler>
                </xp:checkBox>
            </div>
        </div>

        <div class="row"></div>

        <div class="row">
            <label class="col-md-4 control-label">Count</label>
            <div class="col-md-8">
            <xp:inputText id="inputText1" value="#{document1.count}"  defaultValue="0">
                <xp:this.converter>
                    <xp:convertNumber type="number"></xp:convertNumber>
                </xp:this.converter>
            </xp:inputText>
            </div>
        </div>

    </div>
</xp:panel>

Just one checkbox that, when clicked, adds one to the count field.

3. JavaScript code that is attached to the check box:

function updateCount () {
	
	var currVal = XSP.getElementById("#{id:inputText1}").value;
	XSP.getElementById("#{id:inputText1}").value = currVal + 1;
	
}

When I click the checkbox I get the following error:

TypeError: null is not an object (evaluating 'XSP.getElementById("#{id:inputText1}").value')

I assume that JavaScript cannot find the item inputText1 in the DOM? Any ideas what I am doing incorrectly? Thank you in advance!

Answer 1

I think your function is in a script library?

The library can't parse the #{id:inputText1} reference.

Change the function to this:

function updateCount (elem) {
    currVal = parseInt(elem.value);
    elem.value = parseInt(1) + currVal;
}

Then when you call it, call it like:

<xp:eventHandler event="onclick" submit="false">
    <xp:this.script>
        <xp:executeClientScript 
            script="updateCount(XSP.getElementById('#{id:inputText1}'))">    
        </xp:executeClientScript>
    </xp:this.script>
</xp:eventHandler>

You'll need to customise your function to fit with your needs. You may also need to pass in the values of other fields for actual values.

EDIT

You can also add your function in an Output Script / xp:scriptBlock directly on the xpage or custom control if you aren't needing to re-use it in lots of places:

<xp:scriptBlock id="scriptBlock1">
    <xp:this.value><![CDATA[function updateCount () {
        var val1 = parseInt(XSP.getElementById("#{id:inputText1}").value);
        var val2 = parseInt(XSP.getElementById("#{id:inputText2}").value);
        var val3 = parseInt(XSP.getElementById("#{id:inputText3}").value);
        var val4 = parseInt(XSP.getElementById("#{id:inputText4}").value);

        var currVal = val1 + val2 + val3 + val4;

    }]]></xp:this.value>
</xp:scriptBlock>