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

Vielen lieben Dank für die Antwort!
Ich bekomme jetzt die Fehlermeldung FrageID is not defined. Das ist die Variable, die ich sowieso schon vermutet habe, aber ich kann nicht nachvollziehen, wie sie nicht definiert ist. Eingefügt ist sie vor dem Code und definiert habe ich sie zu Beginn als FrageID auch. Woran könnte das denn sonst noch liegen?
Vielen Dank und liebe Grüße

---

Ich bekomme jetzt angezeigt:

> Uncaught ReferenceError: SF02 is not defined

Mit Bezug auf folgende Zeile:

> console.log(SF02_qst, SF02 + "_qst", frage);

Tragen Sie dort bitte nicht die Frage-ID ein, sondern exakt den Wortlaut, wie ich es oben geschrieben habe, also mit Variablen-Namen:

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

... wobei Sie den Code ja mittlerweile massiv geändert haben. Also kann diese Zeile erstmal wieder raus. Aber ehrlich gesagt denke ich, dass der Code vorher sinnvoller war.

---

Habe ich gemacht, aber der Fehler bleibt ja derselbe also "FrageID is not defined", oder?

---

Vielleicht hilft auch die Info noch, dass die relevanten Elemente auf einer separaten Seite funktionieren, aber einen anderen Fehler anzeigen (responseCSS() requires a node that responds)?

---

Nun, früher hatten Sie ja eine Funktion, die einen Parameter frageID hatte - das haben Sie geändert, daher gibt es diese Variable jetzt nicht mehr. Daher auch meine Antwort, dass die console.log()-Zeile im neuen Code entfernt werden kann, weil sie nicht mehr korrekt funktionieren kann. Das wäre zum Debugging des alten Codes gewesen. Sagen Sie gerne Bescheid, wenn die Zeile drausen ist, dann können wir weiter schauen, wo es hakt.

---

Okay, ist entfernt!

---

Aber jetzt ist es ja wiedr der alte Code, oder? Zumindest ist da jetzt wieder ein
function DynamicFilter(...)
den ich vorhin vermisst hatte. Aber ich sehe gerade, dass wir über unterschiedliche Stellen im Code gesprochen hatten.

Suchen Sie bitte mal diese Stelle:

new DynamicFilter("SF01", "VT01");
new DynamicFilter("SF01", "JW01");

von dort aus nach unten bis

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

und unter dieser Zeile nun bitte nochmal das console.log() einfügen

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

Denn de Fehler kommt aus der (ein paar Zeilen weiter) darunter liegenden Zeile

frage.style.display = "none";

---

Aber der Code an dieser Stelle lautet doch:

<script type="text/javascript">
<!--

var dropdown = document.getElementById("JJ01");
var frage = document.getElementById("SF02_qst");

function toggle5() {
  if (dropdown.value == "6") {
    frage.style.display = "";
  } else {
    frage.style.display = "none";
  }
}
SoSciTools.attachEvent(dropdown, "change", toggle5);
SoSciTools.attachEvent(dropdown, "click", toggle5);
toggle5();
// -->
</script>

Den habe ich auch gerade nicht grob verändert, nur die eine Zeile herausgenommen. Sprechen wir denn von derselben Stelle?

---

Eben nicht ;) Die Stelle, wo der Fehler entsteht, ist die unter

new DynamicFilter("SF01", "VT01");
new DynamicFilter("SF01", "JW01");

Darüber stehet als Kommentar

// FILTERFRAGEN JA

Ist unter TZ02 und einer HTML-Tabelle platziert.

---

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