클라이언트 측 계산이 작동하지 않습니다.

Question

5 x 5 테이블 확인란이 있으며 사용자가 선택한 항목에 따라 비용이 계산됩니다 (조금 더 복잡하지만 생각이납니다.). 클라이언트 사이드 자바 스크립트 (비 핵심 XPages 앱)를 사용하여 계산하고 싶지만 화면의 값을 업데이트 할 수 없습니다. > 유형 번호의

을 "계산"-

가

1. 단지에 하나 개의 필드를 가진 양식 : - 나는 시도하고 자바 스크립트 작업을 얻을 수있는 간단한 양식을 만들었습니다 여기에 내가 무엇을 가지고 다음 코드를 사용하여 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> 

클릭하면 하나의 체크 박스가 카운트 필드에 하나씩 추가됩니다.

체크 박스에 부착되어
1. 자바 스크립트 코드 :

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

나는 다음과 같은 오류가 체크 박스를 클릭하면 :

TypeError : null이 (XPath.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> 

당신은해야합니다 귀하의 요구에 맞게 함수를 정의합니다. 실제 값에 대해서는 다른 필드의 값을 전달해야 할 수도 있습니다.

당신은 또한 출력 스크립트/XP에서 기능을 추가 할 수 있습니다

편집 : 스크립트 블록을 직접 xpage 또는 사용자 정의 컨트롤에 당신이 많은 장소에서 다시 사용할 필요하지 않는 경우 :

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