JS Folgefrage bei bestimmter Option sofort einblenden - Problem mit frage is null- obwohl Text mit JS unter beiden Fragen

Question

Hallo SoSci Survey Online Support,

ich möchte nach einer Auswahlfrage, nur wenn Option C ausgewählt wurde mittels Javascript direkt under der Auswahlfrage eine offene Texteingabe-Frage anzeigen lassen.

Dafür habe ich folgenden Code als HTML-Code als Text gespeichert:

<script type="text/javascript">
<!--
//OptionA = Ursprung; B=beibehalten C= neues 
var optionA = document.getElementById("QF01_01a");  // Original
var optionB = document.getElementById("QF01_02a");  // Option "Beibehalten"
var optionC = document.getElementById("QF01_03a");  // Option "Neues"
var frage = document.getElementById("TA01");  // HTML-ID neues Port Frage
 
function toggle() {
  if (optionC.value=3) {
    // Wurde "Neues, anderes" gewählt, dann wird die Frage angezeigt
    // Keine Angabe ("") verwendet die Standard-Einstellung (normal anzeigen)
    frage.style.display = "";
  } else {
    // Mit der Anzeigeoption "none" wird die Frage ausgeblendet
    frage.style.display = "none";
  }
}

SoSciTools.attachEvent(optionC, "click", toggle); 
 
// Und jetzt gleich soll sie auch ausgeführt werden, damit die Anzeige zu Beginn korrekt ist
// (z.B. ausblenden der Texteingabe zu Beginn)
toggle();
// -->
</script>

Im Fragebogen erstellen erscheint zuerst Frage GF01 - die Auswahlfrage (bei der nur bei Option C die Folgefrage auf gleicher Seite erscheinen soll), danach erscheint TA01 und darunter kommt der HTML-Code mit dem JS Text.

Die Fehlerkonsole von Firefox zeigt dies an:

Uncaught TypeError: frage is null
    toggle https://www.soscisurvey.de/retailinv5/index.php?i=UVESYRWMZQJC&rnd=OKOC:732
    <anonymous> https://www.soscisurvey.de/retailinv5/index.php?i=UVESYRWMZQJC&rnd=OKOC:743

Markiert ist folgende Zeile: frage.style.display = "";

Alle Fragen haben bei Prüfung ein leeres Quadrat (es gibt keine Antwortprüfung).

Als zweiten Versuch habe ich statt if (optionC.value=3) if (QF01=3) probiert; auch wieder mit frage null als Fehler. (optionC.checked) hatte ich am Anfang, dann aber verändert, weil ich eine Auswahlfrage und keine Mehrfachantwort habe.

Ich bin Ihnen sehr dankbar für die richtige Anzeige/ fürs Ausblenden des Javscriptcodes und der Folgefrage.

Vielen Dank im Voraus!

Answer 1

Der Fehler geht indirekt auf diese Zeile zurück:

var frage = document.getElementById("TA01");

Und zwar gibt es auf der Seite kein HTML-Element mit der HTML-ID "TA01". Deshalb liefert getElementById() nur ein undefinded. Und wenn Sie dieses dann verwenden möchten, also in

frage.style.display = "";

dann funktioniert das nicht, und ein Fehler wird angezeigt.

Verwenden Sie stattdessen "TA01_qst", das ist die korrekte HTML-ID. Mehr dazu s. auch Entwickler-Tools im Browser.

Comments

Vielen Dank für Ihre Hilfe! Die Umsetzung in JS funktioniert einwandfrei.

Darf ich Sie höflich um Unterstützung in meinem neuen inhaltlich bezogenen Problem bitten?
Die Folgefrage, die nur bei OptionC auftritt muss als Summe 100 bilden. Vor der JS Umsetzung habe ich dafür die Antwortprüfung verwendet.
Jetzt (mit JS Verwendung) funktioniert die Antwortprüfung nicht mehr, es kommt auch bei Optionen A und B (wo keine Folgefrage auftritt) zur Fehlermeldung, dass die Summe nicht 100 ist (was unlogisch ist) - ein Fortsetzen des Fragebogens ist nicht mehr möglich.

Wie kann ich die Summenprüfung von 100 bei der Folgefrage von Option C integrieren, ohne dabei den JS Code zu gefährden?

Vielen Dank im Voraus!

---

JavaScript ändert nur die Optik - die Frage ist auch bei Auswahl von B oder C Teil der Fragebogen-Seite, und wenn die Summe nicht 100 ist, dann moniert SoSci Survey das korrekterweise.

Ene Möglichkeit wäre, dass Sie die Summe auf der folgenden Seite mit einer individuellen Antwortprüfung überprüfen: https://www.soscisurvey.de/help/doku.php/de:create:checks-php

---

Vielen Dank für den Hinweis!
Habe auf der der Folgeseite im Fragebogen jetzt als PHP-Code die Überprüfung, wenn die Antwort fehlt (Antwortcode -9), die Wiederholung der Seite:

if ((value('QF01') == -9)) {
  markFail('QF01');
  repeatPage('JS05');
}

und direkt darunter den PHP Code: Wenn die Summe der Folgefrage nicht 100 ergibt, wenn OptionC gewählt wurde, dann soll die Seite wiederholt werden:

if ((value('QF01')== 3) and ((value('TA01_SM') != 100))) {
  markFail('TA01');
  repeatPage('JS06');
}
Nur, das Problem ist leider, dass ich bei Auswahl von C nach "Weiter" auf die Seite zurückgeleitet werde, mit der eigenen Fehlermeldung, dass die Summe nicht 100 ergibt, obwohl die Summe 100 ergibt (100 steht auch in der automatischen Summenbildung direkt under Frage). Wenn ich OptionA oder B auswähle, erscheint dieser Fehler nicht und ich werde ohne Fehlermeldung zur nächsten Seite geleitet.

Wie kriege ich die Summenüberprüfung korrekt hin?

Ich bin Ihnen für Ihre Unterstützung sehr dankbar!

---

Was sagt denn die Debug-Information nach dem Klick auf "Weiter"?

---

Meinen Sie, wenn ich den Fragebogen im gelben Debug Modus starte und bei der betroffenen Seite oben rechts auf Debug-Informationen klicke?

Da stehen alle Werte, die in interne Variablen abgespeichert werden, etc. - da gibt es keine Fehlermeldung.

Oder meinen Sie ich solle es mal mit debug("TA01_SM"); probieren?
Es erscheint:

Debug-Information für "TA01_SM":
"TA01_SM" = TA01_SM (string)
value('TA01_SM') =

Was komisch ist, weil TA01_SM eigentlich die Summe der zugehörigen Eingabefelder anzeigen soll und nicht einfach leer sein sollte..

Unter der Variablen-übersicht ist TA01_SM  als 1yr_port: Summe
Ganze Zahl gelistet..

Nachdem OptionC ausgewählt wurde und die einzutragende Summe 100 ergibt (automatische Summierung unter den Eingabefeldern bestätigt dies), "Weiter" angeklickt wurde,
wird wieder dieselbe Seite angezeigt, die Zahlen sind immer noch dieselben, die Summe wird immer noch als 100 angezeigt. Trotzdem erscheint die Fehlermeldung (die ich selber geschrieben habe), dass die Summe nicht 100 ist, obwohl sie es ist..

Ich vermute der Fehler liegt in diesem PHP Code - kann es aber nicht genau sagen. Vielleicht muss auch noch mal definiert werden, dass es sich um ganze Zahlen handelt und nicht um strings (also Text). Die Entwickler console zeigt keine Fehler an.

if ((value('QF01')== 3) and ((value('TA01_SM') != 100))) {
  markFail('TA01');
  repeatPage('JS06');
}



Vielen Dank für Ihre Hilfe!

---

Aus der Debug-Information rechts oben ist ersichtlich, welche Daten (wann) eingelesen werden und was der value()-Befehl liefert. Und wenn value('TA01_SM') einen leeren String liefert, dann kann der Filter nicht funktionieren. Nun stellt sich mir die Frage, was in der Debug-Information im oberen Teil steht, dort wo die Verarbeitung der Daten von der letzten Seite erfolgt.

> Hier nochmal ein Link zur betroffenen Seite

Ah, mit Daten und Debug-Informatin, sehr gut. Okay, oben steht:

[Information]    Antwort auf TA01_01 = 89
[Information]    Antwort auf TA01_02 = 1
[Information]    Antwort auf TA01_03 = 3
[Information]    Antwort auf TA01_04 = 7

Die Variable TA01_SM wird an dieser Stelle nicht gesetzt. Das dürfte daran liegen, weil diese Variable nur dann verwendet wird, wenn Sie in der Frage eine Summe einfordern. Ich bin nicht ganz sicher, ob es reicht, dass Sie eine Summe eintragen, oder ob Sie nur dann erscheint, wenn Sie eine Antwortpflicht eingestellt haben. Steht in der Frage noch, dass die Summe 100 ergeben soll (ohne Antwortpflicht)?

---

Vielen Dank für Ihre Antwort.
Bei TA01 unter Prüfung der Antwort in den Einstellungen steht bei Prüfung auf Vollständigkeit - Frage kann übersprungen werden, bei Exakte Summe vorgeben: 100, bei Dezimalstellen: 0 und bei Alternativer Text für "Summe": Summe in Prozent.

Oben rechts bei "Prüfung" ist das Quadrat leer - die Frage kann beim Ausfüllen übersprungen werden.

Auf der nächsten Seite im Fragebogen wollte ich den PHP Code mit der Summenprüfung überarbeiten.

Bisher habe ich folgendes:
// ==3 wenn Option C (die die Folgefrage auslöst) gewählt wurde und die Summe der 4 Eingabefelder nicht 100 ist, soll die Seite wiederholt werden

if ((value('QF01')== 3) and (((int)(value('TA01_01') +(int)(value('TA01_02')+(int)(value('TA01_03')+(int)(value('TA01_04') != 100))))))) {
  markFail('TA01');

Es tritt dieser Fehler im Fragebogen auf, wenn ich trotz korrekter Summe von 100 und OptionC auf "Weiter" klicke:

Im PHP-Code trat ein Fehler auf.

Fehler im Fragebogen: Unsupported operand types: string + int
Zeile: 4

PHP-Code

001 namespace s2survey\questionnaire\environment;
002
003  
004 if ((value('QF01')== 3) and (((int)(value('TA01_01') +(int)(value('TA01_02')+(int)(value('TA01_03')+(int)(value('TA01_04') != 100))))))) {
005   markFail('TA01');
006   {
007   repeatPage('JS06');


Könnten Sie mir bitte helfen, den Fehler zu beheben?

Hier ein Link zur Seite: https://www.soscisurvey.de/retailinv5/index.php?i=Q5BPO9CX9QES&rnd=NQVE

Vielen Dank im Voraus.

---

Wenn man Ihren Code ein wenig aufräumt, sieht man, dass die Klammer nicht ganz passen:

if (
  (value('QF01') == 3) && (
  (
    (int)(value('TA01_01') +
    (int)(value('TA01_02') +
    (int)(value('TA01_03') +
    (int)(value('TA01_04') != 100
  )))))))

Kurzum: Die Klammer nach dem (int) sollte raus. Aber es geht auch nochmal deutlich einfacher:

if (
  (value('QF01') == 3) &&
  (valueSum('TA01') != 100)
)

valueSum() ist nicht nur einfacher, sondern erlaubt auch nicht die Eingabe [leer=-9] [leer=-9] [leer=-9] [127], was mit der "normalen" Summe als Grenzfall möglich wäre.

---

Vielen Dank für Ihren eleganten Code!