Cannot set property 'className' of null

Vielleicht hat einer eine Idee. Ich schwanke schon hin und her, weiß das Problem eigentlich, verstehe es aber nicht und finde keine Lösung.

In meinem Main-Javascript habe ich das hier stehen. Gekürzt, aber das reicht.

if (document.addEventListener)

{

document.addEventListener("DOMContentLoaded", function(){ToTopInit()}, false);

}

else

{

ToTopInit();

}

In der Funktion "ToTopInit" wird per getElementById auf ein Element zugegriffen.

So, das Problem nun, es soll ja alles schneller werden. Nun scheint es so, als ob das JS so schnell ist, dass der DOM noch gar nicht geparst wurde. Daher eben auch die Fehlermeldung, verstehe ich daher. Die kommt aber nicht immer, nur so alle 5% an Zugriffen.

Das "DOMContentLoaded" funktioniert wunderbar im Firefox, aber z.B. Chrome oder alle anderen "Chromium" feuer das niemals ab. Die führen also sofort aus oder eben gar nicht.

Mit eines der Probleme dürfte "Push" sein, denn das JS wird sofort vom Server gesendet. Anscheinend schneller als der DOM gelesen werden konnte. Nur wie komme ich aus dem Dilemma nun raus, ohne 100 Zeilen extra Code einzubauen? "DOMContentLoaded" geht ja dank Chromium schon mal nicht, "LOAD" ist aber viel zu spät, denn das wartet auch auf Adsense und Co.

Das ist natürlich klasse, wenn man drei Tage ein Problem sucht bzw. eben eine Lösung, alles möglich bei Google anklickt und dann wieder hier bei seiner eigenen Frage landet

Wie gesagt, besteht immer noch und ich verstehe es nicht.

Das ist die Funktion, die da aufgerufen wird.

function ToTopInit ()
{
    if ('IntersectionObserver' in window)
    {
        // ToTop
        const header = document.getElementById('header');
        //console.log(header);
        const toTopConfig = {
            // Maximaler Viewport, kein Abstand, minimale Sichtbarkeit
            rootMargin: '0px',
            threshold: 0.01
        };
        
        // Observer starten
        let toTopObserver = new IntersectionObserver(onIntersectionToTop, toTopConfig);
        
        // Observe für Elemente einrichten
        toTopObserver.observe(header);
        
    
        function onIntersectionToTop(entries)
        {
            // Loop über alle entries
            entries.forEach(function(entry)
            {
                // Wenn ein Eintrag den Viewport verlassen hat (== 0)
                if (entry.intersectionRatio == 0)
                {
                    var toTop = document.getElementById('to-top');    
                    toTop.className = 'fadein';
                    toTop.addEventListener("click", scrollToY, false);
                }
                else
                {
                    var toTop = document.getElementById('to-top');
                    toTop.className = 'fadeout';
                    toTop.removeEventListener("click", scrollToY, false);
                }
            });
        }
    }
}

Der Fehler wird unten im letzten "else" von der Zeile 36 "toTop.className = 'fadeout';" ausgelöst, nur warum? Wie es scheint, ist die Zeile darüber bzw. der Zugriff darauf nicht möglich, aber auch hier, warum?

Der Aufbau im HTML ist ganz einfach.

Im Body oben steht <div id="herader"> und am Ende vom Body eben <div id="to-top>". Danach kommt asynchron das Javascript. Der Zugriff auf den "Header" funktioniert immer, der auf ToTop nur zu 95%. Wie kann das sein?

Wäre mir ja völlig egal, aber der Fehler bricht halt alle anderen Scripte auch ab. Da funktioniert dann gar nichts mehr.

Und noch verwirrender ist eben, dass auf die ID ja erst zugegriffen wird, wenn ein "onIntersection" stattfindet, also gescrollt wird und der Browser seine Überwachung bereits aktiviert hat. Wie kann man aber bitte in einem Dokument scrollen, wenn der DOM noch gar nicht vollständig geladen ist?