JavaScript greift auf bereits entfernte DOM-Elemente zu?

[borisbaer]

Hallo zusammen,

ich habe ein js script geschrieben, welches das Hin- und Herblättern zwischen mehreren Seiten ermöglichen soll (change-page.js). Jetzt wird über ein anderes script (maps.js) der Inhalt von .maps .wrapper über fetch() ausgetauscht.

Es funktioniert auch oberfläch alles, doch wenn ich in die Konsole schaue, dann gibt es eine Fehlermeldung, wenn ich mit den Pfeiltasten oder Pfeil-Buttons umblättere: Uncaught TypeError: node.parentNode is null. Man kann den Fehler leicht rekonstruieren, wenn man über die Navigation „Reise zum Nexus“ aufruft (diese und „Palast von Boletaria“ sind momentan die einzigen beiden aufrufbaren Karten). Blättert man dann hin und her, dann erscheint irgendwann obiger Fehler in der Konsole.

Ich habe versucht, ein wenig Debugging zu betreiben, und mein Eindruck ist, dass hier das script change-page.js zweimal schießt, einmal für den alten Inhalt von .maps .wrapper und einmal für den neuen. Wie kann ich das verhindern? Denn der alte Inhalt ist ja freilich nicht mehr verfügbar und somit greift das script ins Leere.

Außerdem musste ich feststellen, dass ich einen Timer brauche nach dem fetch(), da sonst das script change-page zu schnell ausgeführt wird, sprich bevor die neuen Elemente überhaupt im DOM sind. Da gibt es sicher eine bessere Lösung als die mit dem Timer, oder?

setTimeout( () => {
    changePage( reset = true );
}, 100 );

Ich wäre sehr dankbar für jede Hilfe, denn ich komme hier nicht mehr weiter.

Gruß
Boris