Hinweis wird nicht angezeigt, egal was eingegeben wird und Seite wird auch nicht übersprungen

Question

Vielen Dank für Ihre schnelle Antwort.
Leider bin ich am verzweifeln. Deswegen werde ich hier etwas ausführlicher erklären, was mein Problem dabei ist.
Für die offene Texteingabe hatte ich bereits beschränkt, dass Dezimalzahlen auf zwei Kommastellen und zwischen 0 und 100% eingegeben werden dürfen. Die Frage auf der Seite ist: "Wie hoch/niedrig schätzen Sie Ihre Wahrscheinlichkeit ein im Alter von 65 Jahren an Weitsichtigkeit zu leiden?" Diese Seite wird übersprungen (das hab ich schon so eingestellt), wenn eine der Auswahl-Fragen auf vorherigen Seiten ("Sind Sie weitsichtig?") mit "Ja" beantwortet wurde.
Was ich zuerst noch wissen wollte ist: Ich möchte einen Hinweis auf der Seite mit der Wahrscheinlichkeitsfrage einfügen ("Bitte überprüfen Sie Ihre Eingabe"), sobald ein Wert eingetragen wurde (um es zu erleichtern, hätte ich codiert, dass der Hinweis erscheint, wenn ein Wert > -1 angegeben wird). Aber alle "if-" Php-Codes und JavaScript-Codes, die ich versucht habe, haben nicht funktioniert. Entweder wurde der Hinweis nicht angezeigt (auch nicht nach Eingabe einer Zahl > -1) oder er wurde immer angezeigt und bei beiden Varianten konnte die Seite nicht vollständig übersprungen werden. Die eigentlich Frage wurde zwar nicht mehr angezeigt (weil vorherige Weitsichtigkeitsfrage mit "Ja" beantwortet wurde), dafür aber der Hinweis.
Das wäre beispielsweise ein JavaSkriptCode (als Html-Code eingefügt), den ich versucht habe:

<script type="text/javascript">
<!--
var frage1 = document.getElementById("BB14_01"); // müsste Html-ID des Eingabefeldes sein
var fr1 = frage1.value;
 var text1 = document.getElementById("Hinweis"); 
// wenn Eingabe größer -1 (zBsp. 0), dann wird der Hinweis angezeigt
 if (fr1 > -1) {
    // Anzeigen
    text1.style.display = "";
  } else {
    // Ausblenden
    text1.style.display = "none";
  }
</script>

Dieser Code führt allerdings nicht dazu, dass der Hinweis angezeigt wird (egal was man eintippt) und die Seite wird dabei auch nicht übersprungen (sie zeigt einfach nur die leere Seite an), wenn vorher bei der Weitsichtigkeitsfrage mit "Ja" geantwortet wurde. Denselben Filter habe ich bei einer darauffolgenden Seite eingebaut und da hat es funktioniert, für diese Seite hatte ich allerdings auch keinen Hinweis eingebaut (noch nicht).
Ich hoffe Sie verstehen mein Problem und können mir helfen.

Answer 1

Ihr Script ist schonmal ein guter Anfang. Was noch fehlt ist ein Auslöser, wann es denn ausgeführt werden soll das Script. Im Moment läuft es einmal - und zwar genau dann, wenn die Seite bzw. der Abschnitt mit dem Script geladen wird.

Sie möchten vermutlich, dass das Script läuft, wenn der Teilnehmer etwas in dem EIngabefeld eingibt ("keyup") oder wenn er das Eingabefeld verlässt ("blur"). Das könnte dann etwa so aussehen:

<script type="text/javascript">
var frage1 = document.getElementById("BB14_01"); // Html-ID des Eingabefeldes

function check1() {
  var fr1 = frage1.value;
  var text1 = document.getElementById("Hinweis"); 
  // wenn Eingabe größer -1 (zBsp. 0), dann wird der Hinweis angezeigt
   if (fr1 > -1) {
      // Anzeigen
      text1.style.display = "";
    } else {
      // Ausblenden
      text1.style.display = "none";
    }
}

frage1.addEventListener("keyup", check1);
</script>

An Ihrer Funktion selbst habe ich nichts verändert. Falls sie noch nicht das tut, was sie soll, werfen Sie bitte einen Blick in die JavaScript-Fehlerkonsole Ihres Browsers.

Comments

Also ich hab den Code so eingegeben. Leider passiert da immer noch nichts und die JavaSkript Fehlerkonsole zeigt schon einen Syntax-Fehler an, wenn ich folgendes eingebe:
<script type="text/javascript">
<!--
var input = document.getElementById("BB14_01");
console.log(input);
-->
</script>

Also der Hinweis, den ich einfügen möchte, sollte erscheinen, wenn ein Proband eine Eingabe in das offene Eingabefeld macht, die größer -1 ist. Und da das Eingabefeld beschränkt ist auf Zahlen zwischen 0 und 100, müsste der Hinweis jedes mal nach(!) Eingabe erscheinen. Leider erscheint er jetzt gar nicht mehr.
Der Hinweis ist ein normaler Textbaustein. Ich weiß nicht, ob man Textbausteine mit
var text1 = document.getElementById("Hinweis");  verbinden darf.

Und kann es sein, dass die Funktion "var fr1 = frage1.value;" nur den Antwortcode von BB14_01 berücksichtigt, aber nicht die eingegebene Zahl? Bei offenen Texteingaben dürfte es ja höchstens einen Antwortcode geben. Aber ich möchte mich ja auch die Zahl beziehen, die eingegeben wird.
Meine Hoffnung und Idee dahinter war, dass, abhängig von der Antwort auf eine vorherige Auswahlfrage (auf einer Seite davor), BB14_01 nicht angezeigt und somit eigentlich die komplette Seite übersprungen wird (der Hinweis dürfte ja dann auch nicht angezeigt werden, weil gar keine Zahl eingegeben wird).

In dem Feld, wo man die Php-Codes und Html-Codes und die Textbausteine und Fragen hineinziehen kann, habe ich die offene Texteingabe BB14_01 nicht hineingezogenen, auch den Textbaustein nicht.
BB14 wird bereits in einem Php-Code auf der Seite verwendet:
if (value('ZZ07') == 2) {
  question('BB14');
}

Und der Textbaustein des Hinweises sollte ja auch erscheinen, wenn er nicht extra in das Feld hineingezogen wird, weil es ja im JavaSkript-Code verwendet wird.
Ich habe auch schon probiert, ob es einen Unterschied macht, ob man den Code als Textbaustein in das Feld zieht oder einfach als Html-Code und es macht leider keinen Unterschied.
Im Quellcode habe ich schonmal geguckt und da steht wenigstens die Html-ID "BB14_01".

---

> die JavaSkript Fehlerkonsole zeigt schon einen Syntax-Fehler an, wenn ich folgendes eingebe:

Wie lautet der Hinweis/Fehler denn? Das wäre für die Lösung des Problems ganz essenziell.

Posten Sie auch gerne ein Pretest-Link direkt (!) zur betroffenen Seite.

> Der Hinweis ist ein normaler Textbaustein. Ich weiß nicht, ob man Textbausteine mit
var text1 = document.getElementById("Hinweis");  verbinden darf.

Nein, vermutlich ist die HTML-Kennung eine andere. Auch dazu kann ich anhand des Links gerne mehr sagen.

> Und kann es sein, dass die Funktion "var fr1 = frage1.value;" nur den Antwortcode von BB14_01 berücksichtigt, aber nicht die eingegebene Zahl?

Sie haben oben nicht verraten, welche Kennungen für welche Fragen sehen. Insofern kann ich nur davon ausgehen, dass Sie das bewusst und korrekt gewählt haben.

> Und der Textbaustein des Hinweises sollte ja auch erscheinen, wenn er nicht extra in das Feld hineingezogen wird, weil es ja im JavaSkript-Code verwendet wird.

Nein, der JavaScript-Code verweist nur auf ein Element der Seite - im Gegensatz zum question() und text() im PHP-Code bindet der JavaScript-Code keine Seitenelemente ein.

---

Also wenn ich den JavaSkript-Code:
<script type="text/javascript">
<!--
var input = document.getElementById("BB14_01");
console.log(input);
-->
</script>
in die Fehlerkonsole eingebe, wird folgendes angezeigt:
VM340:1 Uncaught SyntaxError: Unexpected token <

Hier ist der Pretest-Link zum Fragebogen (der sich absichtlich nur auf die beiden relevanten Seiten beschränkt):
https://www.soscisurvey.de/Bachelor201920/?act=vhbkiMB78R6fVYhd5JNQx8WG

Ok, ich habe jetzt den "Hinweis" in das Feld unter den PHP-Code gezogen. Darunter steht der Html-Code:
<script type="text/javascript">
var frage1 = document.getElementById("BB14_01"); // Html-ID des Eingabefeldes

function check1() {
  var fr1 = frage1.value;
  var text1 = document.getElementById("Hinweis");
  // wenn Eingabe größer -1 (zBsp. 0), dann wird der Hinweis angezeigt
   if (fr1 > -1) {
      // Anzeigen
      text1.style.display = "";
    } else {
      // Ausblenden
      text1.style.display = "none";
    }
}

frage1.addEventListener("keyup", check1);
</script>

Jetzt wird der "Hinweis" die ganze Zeit rot angezeigt, egal ob die Seite eigentlich übersprungen werden soll (indem bei Auswahl-Frage auf vorheriger Seite "Ja" angeklickt wird) oder nicht. Und der Hinweis sollte ja eigentlich erst erscheinen, wenn eine Eingabe in das Eingabefeld erfolgt ist, die größer -1 ist.

Das heißt auf Seite 2 des Pretests stehen folgende Codes
Php-Code:
if (value('ZZ07') == 2) {
  question('BB14');
} // dieser Code sollte ja die Frage BB14 bereits in dieses Bearbeitungsfeld einbeziehen (wo man die Html-Codes, PHP-Codes und Textbausteine einziehen kann), weshalb sich auch das JavaSkript darauf beziehen können sollte

Darunter:
Textbaustein mit dem "Hinweis"

Darunter Html-Code:
<script type="text/javascript">
var frage1 = document.getElementById("BB14_01"); // Html-ID des Eingabefeldes

function check1() {
  var fr1 = frage1.value;
  var text1 = document.getElementById("Hinweis");
  // wenn Eingabe größer -1 (zBsp. 0), dann wird der Hinweis angezeigt
   if (fr1 > -1) {
      // Anzeigen
      text1.style.display = "";
    } else {
      // Ausblenden
      text1.style.display = "none";
    }
}

frage1.addEventListener("keyup", check1);
</script>

---

Wenn ich bei der ersten Frage "nein" Antworte, bekomme ich auf Seite 2 erst einmal keinen Fehler (Unexpected token). Ich denke es, es ist browserspezifisch und liegt daran, dass Sie vor dem --> keine zwei Schrägstriche verwenden. Korrekt wäre

// -->

Alternativ können Sie das <!-- und das --> komplett weglassen. Heutzutage ist das nur noch ein Feinschliff, den es kaum noch braucht.

Wenn ich dann einen Wert in das Eingabefeld eintrage, erhalte ich folgende Meldung:

> TypeError: text1 is null

Das Bezieht sich auf folgende Zeile im Code:

text1.style.display = "";

Das wiederum bedeutet, dass unter der HTML-ID "Hinweis" nichts im HTML-Code steht, also folgende Zeile

var text1 = document.getElementById("Hinweis");

anzupassen wäre. Allerdings haben Sie Ihrem Hinweis überhaupt keine HTML-ID gegeben. Das sollten Sie nachholen. Und dann können wir auch gleich "Hinweis" verwenden. Schalten Sie - falls Sie den "formatierten Text" verwenden, mit dem letzten Symbol in die HTML-Ansicht:

<p id="Hinweis" style="font-weight: bold; color :#e82a1f">Bitte überprüfen Sie Ihre Eingabe!</p>

Ein <font> und ein <b> habe ich bei der Gelegenheit auch gleich entfernt.

---

Ok, ich hatte den Hinweis als Textbaustein gespeichert mit der Kennung "Hinweis" aber eben nicht als Html-Code. Das habe ich jetzt gemacht.
Die Fehlerkonsole hat bei mir eine Fehlermeldung angegeben, weil ich
<script type="text/javascript">
<!--
-->
</script>
diesen Teil komplett mit // Zeichen formulieren müsste bzw. wie Sie es geschrieben haben, hätte ich das auch einfach weglassen können.
Jetzt wird mir in der Konsole die ID von "Hinweis" angezeigt.
Allerdings tut der Hinweis noch nicht, was ich möchte. Also wenn bei der ersten Frage "Ja" angeklickt wird, wird in der darauffolgenden Seite BB14 nicht mehr angezeigt, was ja richtig ist. Der Hinweis wird aber immer angezeigt, egal ob man in das offene Eingabefeld von BB14 etwas eingibt.
Und das obwohl der Hinweis jetzt eine Html-Adresse hat.
Meine Theorie wäre:
Der Hinweis ist jetzt als Textbaustein (aber halt als Html-Code) unter den ganzen Codes. Das heißt ja eigentlich er wird immer angezeigt. Deshalb müsste man ihn doch erst per JavaSkript wieder ausblenden und dann abhängig von der Bedingung (Eingabe in offenes Eingabefeld größer -1) wieder einblenden oder?

---

> Also wenn bei der ersten Frage "Ja" angeklickt wird, wird in der darauffolgenden Seite BB14 nicht mehr angezeigt, was ja richtig ist. Der Hinweis wird aber immer angezeigt, egal ob man in das offene Eingabefeld von BB14 etwas eingibt.

In dem Fall wird das JavaScript vermutlich nicht aktiv bzw. kann nicht auf das (nicht mehr angezeigte) Eingabefeld zugreifen. Eine Lösung könnte wie folgt aussehen:

<script type="text/javascript">
var frage1 = document.getElementById("BB14_01");

function check1() {
  var fr1 = frage1.value;
  var text1 = document.getElementById("Hinweis");
  if (fr1 > -1) {
      // Anzeigen
      text1.style.display = "";
   } else {
      // Ausblenden
      text1.style.display = "none";
   }
}

if (frage1) {
  frage1.addEventListener("keyup", check1);
  check1();
} else {
  document.getElementById("Hinweis").style.display = "none";
}
</script>

Eine andere Lösung bestünde darin, dass man das Hinweis-HTML per Filter in der Ja/Nein-Frage einfach ausblenden lässt, wenn "Ja" ausgewählt wurde. So wie die Frage auch.

---

Ok, wenn ich jetzt den Code so eingebe, wird in der Fehlerkonsole folgendes angezeigt:
The key "target-densitydpi" is not supported.

Der Hinweis wird nun nicht mehr angezeigt, wenn man bei der Auswahl_Frage zuvor "Ja" anklickt. So war es ja auch gedacht. Nur wird die Seite nicht übersprungen, obwohl weder Frage noch Hinweis angezeigt werden. Ein gotoPage() kann ich glaube ich auch nicht einfügen, weil die nächsten Seite weiter in zufälliger Reihenfolge erscheinen sollen, ohne sich wiederholen. (im eigentlichen Fragebogen, der aus über 20 Seiten besteht, habe ich die schon in zufälliger Reihenfolge ablaufen lassen).

Mein eigentliches Problem ist, dass der Hinweis bereits da ist, wenn der Proband von der ersten Seite auf die zweite Seite wechselt (wenn die Auswahl-Frage mit "Nein" beantwortet wurde). Er sollte aber erst nach Eingabe eines Wertes in die offene Texteingabe auf der zweiten Seite angezeigt werden.
Das heißt: ein Proband klickt auf der ersten Seite bei der Auswahl-Frage "Nein" an und dann auf weiter. Auf der nächsten Seite wird erst nur die Frage BB14 angezeigt. Dann gibt er einen Wert zwischen 0 und 100 ein und nach der Eingabe (oder auch bei Eingabe der ersten Zahl, wäre auch ok), erscheint der rote Hinweis.
Ich gebe Ihnen nochmal an, was ich auf der zweiten Seite stehen habe:

PHP-Code:
if (value('ZZ07') == 2) {
  question('BB14');
}

Textbaustein (Darstellung Html-Code) mit Kennung und Html-ID "Hinweis"

Html-Code:
<script type="text/javascript">
var frage1 = document.getElementById("BB14_01");

function check1() {
  var fr1 = frage1.value;
  var text1 = document.getElementById("Hinweis");
  if (fr1 > -1) {
      // Anzeigen
      text1.style.display = "";
   } else {
      // Ausblenden
      text1.style.display = "none";
   }
}

if (frage1) {
  frage1.addEventListener("keyup", check1);
  check1();
} else {
  Hinweis.style.display = "none";
}
</script>

Was alternativ auch ginge, wäre, dass der Hinweis angezeigt wird, wenn der Proband nach Eingabe seines Wertes die Maus über den Weiter-Knopf bewegt und dann über dem Weiter-Knopf der Hinweis erscheint. Aber das habe ich auch schon mehrfach versucht und komme nicht weiter. Aber diese Alternative hört sich leichter zu bewerkstelligen an.

---

> Nur wird die Seite nicht übersprungen, obwohl weder Frage noch Hinweis angezeigt werden.

Vermutlich, weil der JavaScript-Code ja noch auf der Seite steht. Im einfachsten Fall packen Sie diesen zum Text/HTML-Code mit dem Hinweis.

> Mein eigentliches Problem ist, dass der Hinweis bereits da ist, wenn der Proband von der ersten Seite auf die zweite Seite wechselt (wenn die Auswahl-Frage mit "Nein" beantwortet wurde).

Nun, das steht aber so In Ihrem JavaScript: Wenn der Wert von "frage1" nicht größer als -1 ist, dann soll der Hinweis angezeigt werden.

Fangen Sie den Fall, dass gar nichts eingegeben ist (fr1 == "") im Filter noch gesondert ab. Wandeln Sie die Eingabe außerdem explizit in eine Zahl um (parseFloat(fr1)) und ersetzen Sie Kommata evtl. auch durch Punkte, also

fr2 = parseFloat(fr1.replace(',', '.');
if ((fr1 == "") || (fr2 > -1)) {
  // u.s.w.
}