Fehlermeldung Uncaught TypeError: Cannot read properties of null

Question

Liebe alle,

ich habe die folgende Fehlermeldung bekommen: Uncaught TypeError: Cannot read properties of null (reading 'style').
Ich habe bereits die Element-ID überprüft (document.getElementById("xx_qst") wird gar nicht eingeblendet, document.getElementById("xx") immer eingeblendet und document.getElementById("xx_01") funktioniert, aber eben nur für das Textfeld und nicht für die Überschrift) und habe das Script auch nicht eingefügt, bevor eines der Elemente im Fragebogen deklariert war. Auf einer separaten Seite funktioniert der Code gut und auch an einer anderen Stelle im Fragebogen kommt keine Fehlermeldung und er funktioniert einwandfrei (Var. DV01).

Vielleicht sieht ja noch jemand eine andere Lösung.

Hier noch der Pretest-Link, falls das hilft: https://www.soscisurvey.de/test322622/?act=nwzqD0kFozaAHHhrVeg83iiy

Dnake und liebe Grüße!

Answer 1

Die Fehlermeldung bezieht sich auf diese Zeile:

    // Mit der Anzeigeoption "none" wird die Frage ausgeblendet
    frage.style.display = "none";

weil die Variable "frage" den Wert NULL hat. Definiert wird sie hier:

var frage = document.getElementById(frageID + "_qst");  // HTML-ID der Texteingabe

bei welcher "frageID" der Fehler auftritt, sieht man nicht direkt. Fügen Sie doch direkt unter dem var frage = ... mal folgendes ein:

console.log(frageID, frageID + "_qst", frage);

Dann sollte klarer werden, wo es hakt.

Comments

Oh entschuldigen Sie, ich habe den Fehler an der von mir angegebenen Stelle vermutet.
console.log() ist eingefügt.

---

Okay, die Browserkonsole sagt nun folgendes:

VT01 VT01_qst <div id="VT01_qst" class="s2question spacing">
JW01 JW01_qst <div id="JW01_qst" class="s2question spacing">
DW01 DW01_qst <div id="DW01_qst" class="s2question spacing">
DZ01 DZ01_qst null

Heißt übersetzt: Bei den ersten drei Aufrufen funktioniert es, aber es wird kein Element mit der HTML-ID "DZ01_qst" gefunden. Und tatsächlich finde ich im Quellcode sonst auch nirgends wo einen Verweis auf DZ01. Wurde die Frage vielleicht entfernt? Wenn ja, dann entfernen Sie bitte mal diese Zeile:

new DynamicFilter("DH01", "DZ01");

---

Ui, dann ist das aus Versehen drin geblieben, dankeschön!
Ich habe die Zeile entfernt, leider funktioniert es aber noch immer nicht mit dem Ein- und Ausblenden von SF02. Gäbe es noch eine andere Möglichkeit?

---

Wir müssen uns Schritt für Schritt nähern ;)

Das nächste Problem scheint zu sein, dass Sie die Variablennamen auf der Seite mehrfach verwenden. Auf der obersten Ebene, also nicht gekapselt in einer Funktion. Da steht:

var dropdown = document.getElementById("JJ01");  // Das Eingabefeld der Frage DJ01 (Jahr erste Umsetzung)
var frage = document.getElementById("SF02_qst");

und andernorts:

var dropdown = document.getElementById("DJ01");  // Das Eingabefeld der Frage DJ01 (Jahr erste Umsetzung)
var frage = document.getElementById("DV01_qst");

Das führt nun dazu, dass sich die Aktionen von DJ01 auf SF02_qst beziehen, weil die Variable überschrieben wird. Sie können das nun entweder in eine Funktion kapseln, so wie bei den DynamicFilter()-Abschnitten, oder Sie geben den Variablen und auch der Funktion einen anderen Namen, z.B. frageA und frageB.

---

Ah perfekt, es funktioniert! Vielen lieben Dank :)
LG und noch einen schönen Tag