客户端计算不起作用

时间:2017-10-16 15:32:18

标签: javascript xpages

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

  1. 只有一个字段的表单 - > "计数"型号

  2. 包含以下代码的XPage:

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

    只需一个复选框,点击后,将一个复选框添加到计数字段。

    1. 附加到复选框的JavaScript代码:
    2. &#13;
      &#13;
      function updateCount () {
      	
      	var currVal = XSP.getElementById("#{id:inputText1}").value;
      	XSP.getElementById("#{id:inputText1}").value = currVal + 1;
      	
      }
      &#13;
      &#13;
      &#13;

      当我点击复选框时,我收到以下错误:

      TypeError:null不是对象(评估&#39; XSP.getElementById(&#34;#{id:inputText1}&#34;)。value&#39;)

      我假设JavaScript在DOM中找不到项inputText1?我有什么不正确的想法吗?提前谢谢!

1 个答案:

答案 0 :(得分: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或自定义控件上的Output Script / 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>