客户端计算不起作用

Question

我有一个 5 x 5 table 的复选框，根据用户的选择，计算成本（这有点复杂，但你明白了 :o）。我想使用客户端 JavaScript（它是一个非关键的内部 XPages 应用程序）进行计算，但似乎无法更新屏幕上的值。我已经创建了一个简单的表单来尝试让 JavaScript 工作 - 这是我所拥有的：

只有一个字段的表单 -> "count" 类型为数字
具有以下代码的 XPage：

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

只有一个复选框，点击后会在计数字段中加一。

JavaScript 附加到复选框的代码：

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

当我点击复选框时出现以下错误：

TypeError: null 不是对象（正在计算 'XSP.getElementById("#{id:inputText1}").value'）

我假设 JavaScript 在 DOM 中找不到项目 inputText1？任何想法我做错了什么？提前致谢！

Answer 1

我认为你的函数在脚本库中？

库无法解析 #{id:inputText1} 引用。

将函数改成这样：

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

然后当你调用它时，这样调用它：

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

您需要自定义函数以满足您的需要。实际值可能还需要传入其他字段的值。

编辑

如果您不需要在很多地方重复使用它，您也可以直接在 xpage 或自定义控件上的输出脚本中添加您的函数/xp:scriptBlock：

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

客户端计算不起作用

Client Side calculation not working

javascript

xpages