Client Seite Berechnung funktioniert nicht

Question

Ich habe eine 5 x 5 Tabelle von Kontrollkästchen und, je nachdem, was der Benutzer wählt, werden die Kosten berechnet (es ist ein bisschen komplizierter, aber Sie bekommen die Idee: o). Ich möchte die Berechnung mit clientseitigem JavaScript durchführen (es ist eine nicht kritische interne XPages-App), kann aber die Werte auf dem Bildschirm scheinbar nicht aktualisieren. Ich habe ein einfaches Formular erstellt, um zu versuchen und die JavaScript-Arbeits bekommen - hier ist das, was ich habe:

1. Ein Formular, das nur ein Feld auf sie hat -> „count“ der Typennummer

2. Einen XPage mit dem folgenden 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> 

Nur ein Kontrollkästchen, das beim Klicken auf eins zum Zählfeld hinzufügt.

1. JavaScript-Code, der das Kontrollkästchen angebracht ist:

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

Wenn ich das Kontrollkästchen klicken ich die folgende Fehlermeldung erhalten:

TypeError: null ist kein Objekt (Bewertung von 'XSP.getElementById ("# {id: inputText1}"). Value')

Ich nehme an, dass JavaScript das Element inputText1 im DOM nicht finden kann? Irgendwelche Ideen was ich falsch mache? Vielen Dank im Voraus!

Answer 1

Ich denke, Ihre Funktion ist in einer Skriptbibliothek?

Die Bibliothek kann den # {id: inputText1} -Referenz nicht analysieren.

Ändern Sie die Funktion dazu:

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

Dann, wenn Sie es nennen, nennen Sie es mögen:

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

Sie benötigen Ihre Funktion passen mit Ihren Bedürfnissen anpassen. Möglicherweise müssen Sie auch die Werte anderer Felder für tatsächliche Werte übergeben.

EDIT

Sie auch Ihre Funktion in einem Output Script/xp hinzufügen: Scriptsteuerung direkt am XPage oder benutzerdefinierte wenn Sie es nicht an vielen Orten wieder verwenden benötigen, sind:

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