Bei der Verwendung von setTimeout kann über innerHTML nicht auf ein Objekt zugegriffen werden.

[Chris234]

Hallo,

ich komme bei dem Problem nicht weiter. Ich habe eine Webseite, bei der der angezeigte Inhalt dynamisch aus einer xml-Datei ausgelesen wird. Demzufolge werden die Werte erst nachdem das DOM aufgebaut ist eingelesen. Das JavaScript dafür wird im body mit onLoad aufgerufen. Nun sollen Teile der HTML-Seite abhängig von den eingelesenen Werten ausgeblendet werden. Dafür habe ich ein weiteres JavaScript geschrieben, welches über die ID der entsprechenden Elemente Cookies mit deren Inhalt setzen soll. (Die Daten werden auf weiteren Seiten benötigt und sollen nicht jedes mal neu eingelesen werden) Allerdings benötige ich bei der Funktion eine Verzögerung für die Ausführung, damit zuvor alle Werte eingelesen sind. Ich habe versucht dies mittels setTimeout zu realisieren, aber dann bekomme ich die Fehlermeldung: Uncaught TypeError: Cannot read property 'innerHTML' of null. Wenn ich die Funktion ohne setTimeout aufrufe funktioniert alles.

Hat jemand eine Idee wo mein Denkfehler liegt? Angefügt sind die relevanten Auszüge aus der HTML-Datei und dem JavaScript.

Vielen Dank Christoph

function cookieHPS(){
    setTimeout(cHPS,2000);
}

function cHPS(){
    console.log('Pause');
    var inhalt = document.getElementById('HVorhanden').innerHTML;
        alert(inhalt);
    if (inhalt=='aktiv')
        {
            localStorage.setItem(Hvorhanden, 1);
        }
    var inhalta = document.getElementById('Anzahl_eins').innerHTML;
        alert(inhalta);
    var inhaltb = document.getElementById('Anzahl_zwei').innerHTML;
        alert(inhaltb);
    
    console.log('cookieHPS ausgeführt')
}

            <tr>
                <td> <br></td>
              <td><div class="value_no_edit"><span id="Anzahl_eins">-</span></div></td>
              <td><div class="value_no_edit"><span id="Anzahl_zwei">-</span> </div></td>
              <td><div class="value_no_edit" id="eins"><span category="Main" cfg="15" id="HVorhanden">-</span></div></td>
            </tr></table>

[MudGuard]

Hi,

ich komme bei dem Problem nicht weiter. Ich habe eine Webseite, bei der der angezeigte Inhalt dynamisch aus einer xml-Datei ausgelesen wird. Demzufolge werden die Werte erst nachdem das DOM aufgebaut ist eingelesen. Das JavaScript dafür wird im body mit onLoad aufgerufen. Nun sollen Teile der HTML-Seite abhängig von den eingelesenen Werten ausgeblendet werden. Dafür habe ich ein weiteres JavaScript geschrieben, welches über die ID der entsprechenden Elemente Cookies mit deren Inhalt setzen soll. (Die Daten werden auf weiteren Seiten benötigt und sollen nicht jedes mal neu eingelesen werden) Allerdings benötige ich bei der Funktion eine Verzögerung für die Ausführung, damit zuvor alle Werte eingelesen sind.

Hm. Du hast ein Javascript, das die Werte einliest. Also kannst Du doch an dessen Ende das Script für das Ausblenden dranhängen. Ganz ohne Timeout oder ähnlich wackliger Methoden, die vom Timing der Vorgänge abhängen …

Ich habe versucht dies mittels setTimeout zu realisieren, aber dann bekomme ich die Fehlermeldung: Uncaught TypeError: Cannot read property 'innerHTML' of null. Wenn ich die Funktion ohne setTimeout aufrufe funktioniert alles.

Dann war das wohl zu früh und das Element existiert noch nicht.

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo Chris,

Die Daten werden auf weiteren Seiten benötigt und sollen nicht jedes mal neu eingelesen werden…

D.h. du cachest sie im local storage?

Allerdings benötige ich bei der Funktion eine Verzögerung für die Ausführung, damit zuvor alle Werte eingelesen sind.

Nein. Du brauchst einen Callback, der nach Empfang der Daten aufgerufen wird. Gerne in ein Promise verpackt.

Du hast ein Javascript, das die Werte einliest.

sagt Andreas, und da steckt auch des Pudels Kern. Dieser Teil ist ebenfalls relevant. Wie tust Du das? Wenn Dir die Begriffe Callback oder Promise noch nichts sagen, können wir an Hand des Lade-Codes dann gern drüber reden.

Und wenn Du die Daten als XML bekommst, dann hast Du doch auch eine XML to HTML Transformation gebaut. Diese Transformation muss ebenfalls auf den Datenempfang machen. Wie hast Du es dort gemacht?

Abgesehen davon: Wäre es ein Ansatz, diese Transformation so zu bauen, dass du gar nichts ausblenden musst, sondern die "überflüssigen" Teile gar nicht erst erzeugt werden?

Rolf

[Chris234]

Hallo,

entschuldigt die späte Antwort, ich bin gestern nicht dazu gekommen weiter an dem Problem zu arbeiten. Erstmal vielen Dank für eure Antworten und die Hilfe. Die Daten werden im local storage gecacht und dieser wird beim Verlassen der HTML-Seite wieder gelöscht.

Ich rufe die Funktion jetzt über einen Callback auf und wie schon vermutet war es ein Timing-Problem, jetzt kann ich auf die Elemente zugreifen.

Leider kann ich die Transformation nicht umbauen, da die HTML-Seiten statisch programmiert und designed sind und nur in die entsprechenden DIV-Elemente dynamisch die aktuellen Werte aus der XML-Datei eingetragen werden. Deswegen kann ich das Skript für das Ausblenden auch leider nicht oder nur umständlich hinten anhängen, da beim Einlesen der XML nach den entsprechenden Id's der DIV-Elemente gesucht wird. Dementsprechend bin ich davon ausgegangen, dass beim onload alle Elemente bekannt sein sollten und ich nach einer kurzen Wartezeit die aktualisierten Werte auslesen kann. Dies scheint allerdings mein Denkfehler gewesen zu sein, da ich durch das Callback das Problem nicht mehr habe.

Würde es mir Vorteile bringen Promise zu verwenden? Der Ladecode und die Transformation läuft über Callbacks. Der gesamte Ladevorgang der Werte ist allerdings recht komplex, dementsprechend hatte ich auf die 2500 Zeilen Quellcode, die für das Laden der Daten benötigt werden verzichtet. (Es wird leider so viel benötigt, da die XML über einen Bus eingelesen wird)

Christoph

[Rolf B]

Hallo Chris234,

wenn die Callback-Lösung für Dich funktioniert, bringen Dir Promises keine Vorteile. Je nachdem, wie Du das XML lädst, können sie sogar mehr Arbeit mitbringen, weil Du die Resolve/Reject Logik des Promise in deinen bestehenden asynchronen Ablauf einbauen musst.

Promises sind ein Standardverfahren zur Ablaufsteuerung asynchroner Vorgänge, und sind vorteilhaft, wenn mehrere davon zu koordinieren sind. Wenn sie dann auch noch von verschiedenen Quellen kommen, bietet das einheitliche Instrument "Promise" den Vorteil, dass man nicht die Async-Strategien mehrerer Autoren miteinander kombinieren muss.

Wenn Du die Instrumente nicht brauchst, kannst Du den Koffer auch stehen lassen.

Rolf