Hinweis bei Auswahl von Optionen sofort einblenden

Question

Da wir Fragen zur Arbeitsbelastung im Fragebogen stellen, wurde uns vorgegeben, dass wir bei Auswahl bestimmter Optionen einen Hinweis zu Beratungsangeboten einblenden müssen.
Nun habe ich mich schon einige Zeit durch den EventHandler von JavaScript gearbeitet, aber ich komme am Ende nicht zum richtigen Resultat.

Ziel ist es, dass bei Auswahl der Optionen trifft eher zu und trifft zu eines Items der Hinweis eingeblendet wird. Wenn die nicht ausgewählt werden, soll der Hinweis nicht angezeigt werden.

Ich dachte, dass ich mit diesem Code am ehesten das Ziel erreiche, aber da bekomme ich die Fehlermeldung Uncaught SyntaxError: Unexpected token '<' und der Hinweis wird dadurch dauerhaft eingeblendet.

   <script type="text/javascript">
<!--
var optionA = document.getElementById("WB05_044");  
var optionB = document.getElementById("WB05_043"); 
var frage = document.getElementById("WB06_media");  
 
function toogle() {
 
  if ((optionA.checked) || (optionB.checked)) {
   
    frage.style.display = "";
  } else {
   
    frage.style.display = "none";
  }
}
 

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

Eine weitere Idee, die immerhin zu keiner Fehlermeldung führt, allerdings auch zu überhaupt keinem Hinweis mehr, ist:

<script type="text/javascript">
<!--
var dropdown = document.getElementById("WB05_04_item");  // Das Eingabefeld der Frage DD01
var frage = document.getElementById("WB06_media");  // Die Frage DD02, die ein-/auszublenden ist
 
function toogle() {
  if (dropdown.value == "4") {  // Hier den Wert (Antwortcode) eintragen, bei dem das zweite Dropdown eingeblendet werden soll
    frage.style.display = "";
  } else {
    frage.style.display = "none";
  }
}
 
SoSciTools.attachEvent(dropdown, "change", toogle);  // Bei einer Änderung der Auswahl die Anzeige anpassen
SoSciTools.attachEvent(dropdown, "click", toogle);  // Auch beim Klick prüfen - sonst wird die Änderung evtl. erst beim Verlassen des Dropdowns wirksam
toogle();  // Und zu Beginn auch die korrekte Anzeige sicherstellen
// -->
</script>

Ich denke, dass ich nun tatsächlich ohne Hilfe nicht mehr weiter komme und würde mich über Hinweise zu dem Problem freuen.

Der Link zur Pretest-Seite ist: https://www.soscisurvey.de/schulzentren/?act=1t7r1crrv2bwnvgXQX453mN5

Comments

Ich würde gerne nachsehen, wo es hakt - aber der Link scheint nicht gültig zu sein. Einen gültigen Link können Sie unter Befragungsprojekt -> Pretest und Vorschau erstellen.

> Unexpected token '<'

Ein anderer Nutzer hatte das Probelm auch kürzlich damals war ein <script>-Element innerhalb eines <script>-Elements platziert worden, sodass das "innere" <script> den Fehler verursacht hatte.

---

Bitte entschuldigen Sie, da ist wohl was schief gegangen. Hier kommt der richtige Link: https://www.soscisurvey.de/schulzentren/?act=E2DaQAERFQSqk4VAWyifjipE

Answer 1

Die JavaScript-Fehlerkonsole im Browser meckert:

SyntaxError: missing ( before condition

Dabei bezieht sie sich auf folgende Zeile im Quelltext (die Sie so natürlich nicht geschrieben haben):

function toogle() {
  if <span class="S2Tooltip anchor marker">optionA.checked) </span><span class="S2Tooltip container"><span class="S2Tooltip tiptext rounded shadow">| (optionB.checked</span></span> {
   
    frage.style.display = "";
  } else {
   
    frage.style.display = "none";
  }
}

Woher das <span... kommt? Hier nimmt SoSci Survey fälschlicherweise an, Sie wollten einen Tooltip anzeigen.

Es reich aus, wenn Sie zwischen den beiden Klammern nach dem if ein Leerzeichen einfügen. Oder wenn Sie die überflüssigen Klammern entfernen:

if (optionA.checked || optionB.checked) {

Wir werden beim nächsten Update mal mit SoSci Survey sprechen und dem Programm eine angemessene Erkennung beibringen.

Comments

Wunderbar! Jetzt funktioniert es. Vielen Dank!