Item einer Frage des Typs "Texteingabe offen" einblenden mit JS

Question

Hallo zusammen,
ich habe folgene zwei Probleme:

1) In der Frage BL02 werden mehre Zahlen erhoben. Das Ziel ist, dass auf der gleichen Seite, wenn bei einer der Items eine Zahl > 0 eingegeben wird, dann in der Frage BL04 (Typ: Texteingabe offen) das entsprechende Item eingeblendet wird.
Nun habe ich Probleme mit der Benennung der id bzw. class der Frage BL04. Ich habe schon viel versucht.
[Wenn ich die Frage BL04 als Mehrfachantwort erhebe, dann spreche ich die die einzelne Items über _container an und das funktioniert dann auch. Aber eigentlich möchte bzw. brauche ich die Kästchen nicht.]
Daher meine Frage, wie kann ich die einzelen Items einer "Texteingabe offen" ansprechen?

Wenn das nicht geht würde ich die Mehrfachantwort verwenden und die Kästchen ausblenden

<script type="text/javascript">
    <!--
    
    var ja= document.getElementById("BL03_01a");  
    var nein= document.getElementById("BL03_02a");

    var b1 = document.getElementById("BL02_01");
var b2 = document.getElementById("BL02_02");
var b3 = document.getElementById("BL02_03");
var b4 = document.getElementById("BL02_04");
var b5 = document.getElementById("BL02_05");
var b6 = document.getElementById("BL02_06");

   
var frage_spitzensporthintergrund = document.getElementById("BL04_qst");

var v1 = document.getElementsByClassName("BL04_tab.s2row1");
var v2 = document.getElementById("BL04_tab").s2row2;
var v3 = document.getElementById("BL04_tab").s2row3;
var v4 = document.getElementById("BL04_tab").s2row4;
var v5 = document.getElementById("BL04_tab").s2row5;
var v6 = document.getElementById("BL04_tab").s2row6;

// var v1 = document.getElementById("BL04_01_container");
// var v2 = document.getElementById("BL04_02_container");
// var v3 = document.getElementById("BL04_03_container");
// var v4 = document.getElementById("BL04_04_container");
// var v5 = document.getElementById("BL04_05_container");
// var v6 = document.getElementById("BL04_06_container");



function func_v1() {
var b1v=b1.value
b1v = parseInt(b1v);
if ((b1v>0)){  
    v1.style.display = "";
      } 
else {
   v1.style.display = "none";
}  
}

function func_v2() {
var b2v=b2.value
b2v = parseInt(b2v);
if ((b2v>0)){  
    v2.style.display = "";
      } 
else {
   v2.style.display = "none";
} 
}


function func_v3() {
var b3v=b3.value
b3v = parseInt(b3v);
if ((b3v>0)){  
    v3.style.display = "";
      } 
else {
   v3.style.display = "none";
} 
}

function func_v4() {
var b4v=b4.value
b4v = parseInt(b4v);
if ((b4v>0)){   
    v4.style.display = "";
      } 
else {
   v4.style.display = "none";
}  
}

function func_v5() {
var b5v=b5.value
b5v = parseInt(b5v);
if ((b5v>0)){  
    v5.style.display = "";
      } 
else {
   v5.style.display = "none";
} 
}

function func_v6() {
var b6v=b6.value
b6v = parseInt(b6v);
if ((b6v>0)){  
    v6.style.display = "";
      } 
else {
   v6.style.display = "none";
}  
}
    
function func_ja() {
var b1v=b1.value
b1v = parseInt(b1v);
var b2v=b2.value
b2v = parseInt(b2v);
var b3v=b3.value
b3v = parseInt(b3v);
var b4v=b4.value
b4v = parseInt(b4v);
var b5v=b5.value
b5v = parseInt(b5v);
var b6v=b6.value
b6v = parseInt(b6v);
  if ((ja.checked) & ((b1v>0)||(b2v>0)||(b3v>0)||(b4v>0)||(b5v>0)||(b6v>0))){  
    frage_spitzensporthintergrund.style.display = "";
      } 
   else {
   frage_spitzensporthintergrund.style.display = "none";
}
}


SoSciTools.attachEvent(b1, "change", func_v1);
SoSciTools.attachEvent(b1, "click", func_v1);

SoSciTools.attachEvent(b2, "click", func_v2);
SoSciTools.attachEvent(b3, "click", func_v3);
SoSciTools.attachEvent(b4, "click", func_v4);
SoSciTools.attachEvent(b5, "click", func_v5);
SoSciTools.attachEvent(b6, "click", func_v6);

SoSciTools.attachEvent(b2, "change", func_v2);
SoSciTools.attachEvent(b3, "change", func_v3);
SoSciTools.attachEvent(b4, "change", func_v4);
SoSciTools.attachEvent(b5, "change", func_v5);
SoSciTools.attachEvent(b6, "change", func_v6);

SoSciTools.attachEvent(b1, "click", func_ja);
SoSciTools.attachEvent(b2, "click", func_ja);
SoSciTools.attachEvent(b3, "click", func_ja);
SoSciTools.attachEvent(b4, "click", func_ja);
SoSciTools.attachEvent(b5, "click", func_ja);
SoSciTools.attachEvent(b6, "click", func_ja);
   
SoSciTools.attachEvent(ja, "click", func_ja);
SoSciTools.attachEvent(nein, "click", func_ja);

func_ja();

func_v1();
func_v2();
func_v3();
func_v4();
func_v5();
func_v6();

</script>

2) Ein weiteres Problem ist, dass das Filtern nur funktioniert, wenn man nochmal irgendwo auf der Seite klicke. Daher hatte ich neben dem Eventauslösen "click" auch noch "change" ergänzt, das hilt aber leider nicht.

Answer 1

Möchten Sie vielleicht einen Pretest-Link direkt (!) zur betroffenen Seite posten? Die HTML-IDs und/oder der JavaScript-Code hängen u.U. davon ab, welche Darstellungsvariante Sie für die offene Texteingabe eingestellt haben.

Wenn das Element (z.B. Tabellenzeile) keine eigene HTML-ID hat, kann man die folgende Funktion verwenden, um vom Eingabefeld (node) auf das Element zu kommen:

/**
 * Find a parent node with the specified element name and CSS class.
 * @param {HTMLElement} node
 * @param {String} elName  Search for parent element with this node name (may be null to accept any)
 * @param {String} elClass  Search for parent element with this CSS class (may be null to accept any)
 * @param {String} elAlternative  Search for parent element with this CSS class - and this class is sufficient, even if the name does not match
 * @return HTMLElement|null
 */
SoSciTools.findContainer = function (node, elName, elClass, elAlternative)

Das könnte dann so aussehen:

var input = document.getElementById("BL04_02");
var inputRow = SoSciTools.findContainer(input, "tr");

Comments

Herzlichen Dank für die schnelle Antwort, das ist der Link zur Seite:
https://www.soscisurvey.de/geschaeftsfuehrer2020/?act=8tyoMQkkeiatsN072nrrL0PG
Die Frage BL03 muss mit Ja beantwortet werden, damit BL04 erscheint

---

Danke für den Pretest-Link. Ihre Antwort verunsichert mich ein wenig: Möchten Sie BL04 komplett ein/ausblenden oder nur ein einzelnes Item?

Im Moment zeigt die Fehlerkonsole im Browser folgenden Fehler:

> Uncaught TypeError: v1.style is undefined

Diese Meldung verweist auf folgenden Abschnitt in func_v1()

> else {
>    v1.style.display = "none";
> }

Und v1 wird hier definiert:

> var v1 = document.getElementsByClassName("BL04_tab.s2row1");

Das Problem hier dürfte sein, dass getElementsByClassName() nach Klassen sucht, aber BL04_tab ist eine ID.

Sie können es einmal wie folgt versuchen:

> var v1 = document.getElementById("BL04_tab").getElementsByClassName("s2row1");

Aber beachten Sie, dass v1 dann immer noch eine Liste (!) von Elementen enthält, kein einzelnes Element.

Alterantiv wie schon angedeutet:

> var v1 = SoSciTools.findContainer(document.getElementById("BL04_01"), "tr");

Damit bekommen Sie nur die Zeile (<tr>), welche das Element BL04_01 enthält.

---

Vielen herzlichen Dank!
Die Lösung mit  
>var v1 = SoSciTools.findContainer(document.getElementById("BL04_01"), "tr");
funktioniert super.

Was leider noch nicht geht, (in der Frage als Problem 2 beschrieben) sowohl mit dieser Lösung als als auch mit der "Alternativlösung": Mehrfachantwort, Kästchen ausblenden, etc.  ist folgendes.

Nach der Zahleneingabe braucht es einen Klick in ein anders Feld, damit der Filter angeschoben wird. D.h. sowohl
> SoSciTools.attachEvent(b1, "change", func_v1);
als auch
>SoSciTools.attachEvent(b1, "click", func_v1);
lösen den Filter nicht direkt aus.

---

Der Pretest-Link oben scheint nicht (mehr) auf die betroffene Seite zu verweisen - jedenfalls sehe ich dort keine Mehrfachauswahl.

Evtl. benötigen Sie eine kleine Verzögerung und/oder müssen direkt einen Event-Listener für das Eingabefeld setzen: https://support.soscisurvey.de/?qa=23090/anklicken-bestimmten-antwortitems-nachfolgende-eingeblendet&show=23101#a23101

---

Der Link ist richtig, die Frage Mehrfachantwort habe ich in eine mehrfache Texteingabe umgewandelt.
Es geht um die Frage "BL02", nach der Bestätigung der "BL03" mit ja werden dann die Items aus BL04 eingeblendet.
Wenn der Befragte nacheinander die beiden Fragen ausfüllt, dann klappt es da durch die BL03 "ja"-Bestätigung nochmal geklickt wird. Nachträgliche Änderungen an der BL02 führen jedoch zu keiner Anpassung der BL04.

Ich bin mir unsicher, wie der Event-Listener eingesetzt werden soll. Wäre es so richtig. Leider funktioniert es so nicht.
var b1 = document.getElementById("BL02_01", "keyup", function1() {
  window.setTimeout(function1() {
   func_v1();
  }, 50);
});

---

> die Frage Mehrfachantwort habe ich in eine mehrfache Texteingabe umgewandelt.

Die Verzögerung benötigen Sie in dem Fall nicht (mehr)

Aber soweit ich sehe, haben Sie das Ein-/Ausblenden der unteren Optionen durch ein "change" Event ausgelöst. Das "change" tritt bei einem Textfeld auf, wenn etwas geändert wurde und das Textfeld dann verlassen wird. Das meinen Sie, glaube ich, mit dem zusätzliche Klick.

Wenn Sie das "change" für die Textfelder in ein "keyup" ändern, sollte die Änderung direkt erfolgen.

---

Super!
Das war der Fehler, jetzt funktioniert es. Für Textfelder "keyup", das werde ich mir merken.
Vielen Dank für die tolle Hilfe.