Die JavaScript-Timerfunktion funktioniert in IE10 nicht, während sie in Chrome funktioniert

Ich habe mehrere Probleme beim Stackoverflow mit (irgendwie) demselben Problem gelesen, aber alles, was dort vorgeschlagen wird, scheint für mich nicht zu funktionieren (oder ich implementiere es nicht richtig).

Jedenfalls stecke ich in folgenden Punkten fest: Ich habe eine Timer-Funktion in JavaScript, die einen Countdown von 10 Minuten bis 0 ausführt. Wenn 0 Minuten erreicht sind, wird eine jquery -Funktion ausgelöst, ein Popup-Feld.

Der Javascript-Code lautet wie folgt:

<SCRIPT LANGUAGE="JavaScript">
    function startTimer(duration, display) {
        var timer = duration, minutes, seconds;
        setInterval(function () {
            minutes = parseInt(timer / 60, 10)
            seconds = parseInt(timer % 60, 10);

            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;

            display.textContent = minutes + ":" + seconds;

            if (--timer < 0) {
                my_fun(); //the jquery function that popups the message-box 
                timer = duration;
            }
        }, 1000); //how fast to count
    }
    window.onload = function () {
        var tenMinutes = 60 * 10,
            display = document.querySelector('#time');
        startTimer(tenMinutes, display);
    };
</SCRIPT>

Die Jquery-Funktion ist ziemlich lang (hier einzufügen), aber dies scheint nicht das Problem zu sein. Ich habe die jquery-Funktion separat verwendet (ohne sie über JavaScript auszulösen) und dies funktioniert im IE - sie erscheint, wenn sie im HTML aufgerufen wird. Außerdem habe ich auf das jquery-1.11.2.min.js library verwiesen, das (soweit ich weiß) so ziemlich alle Probleme mit der Browser-Inkompatibilität überwindet.

Als nächstes habe ich nach dem IE10-Konsolenprotokoll gesucht. Dort bemerkte ich, dass es immer wieder den folgenden Fehler erzeugte:

SCRIPT5007: Unable to set property 'textContent' of undefined or null reference. 

Dies ließ mich glauben, dass die Eigenschaft textContent in IE10 nicht verfügbar ist, daher habe ich dies ebenfalls überprüft, obwohl ich nach Recherchen herausgefunden habe, dass diese Eigenschaft in IE10 zulässig ist (funktionieren sollte).

Das nächste, was mir einfiel, war, dass window.onload in IE10 nicht funktionierte. Ich las einige Vorschläge zur Verwendung von neu in onload in IE10 wie folgt: {{ X2}} aber das hatte auch keine Auswirkung.

Dann habe ich versucht, den window.onload JavaScript-Code über der Timer-Funktion einzufügen, damit der textContent möglicherweise nicht leer ist, aber dies hatte auch keine Auswirkung.

Jetzt habe ich keine Ideen mehr. Hat jemand eine Ahnung, wie ich das beheben kann?

UPDATE

Vielen Dank für die Antworten und Vorschläge! Nachdem ich alle Vorschläge ausprobiert hatte, dauerte es noch eine Weile, bis das Problem behoben war, aber ich habe es trotzdem behoben.

Zuerst habe ich versucht, das var display; als globales Element hinzuzufügen, aber dies hatte keine Auswirkungen. Als nächstes habe ich mir meine Codepage im Allgemeinen angesehen. Ich arbeite an einer klassischen Asp-Seite und mache viele serverseitige Sachen. Die Seitenansicht hängt von einigen Abfragen ab. Abgesehen davon hatte ich mein $time ID nach einigen asp-klassischen serverseitigen Handles, sodass ich dachte, dass das Verschieben der ID auf die Seite (vor dem serverseitigen Material) funktionieren könnte. Dies hatte jedoch keine Auswirkungen. Danach habe ich einige Dinge ausprobiert und ehrlich gesagt kann ich mich nicht an alles erinnern.

Dann sah ich #Arunachalam antworten und dachte, dass dies tatsächlich funktionieren könnte, da meine andere JQuery ihre Arbeit im IE erledigte, während JavaScript dies nicht tat. Also anstatt zu verwenden:

window.onload = function () {
            var tenMinutes = 60 * 10,
                display = document.querySelector('#time');
            startTimer(tenMinutes, display);
        };

Ich habe die JQuery-Version davon verwendet:

$(function() {

 var tenMinutes = 60 * 10,display = document.querySelector('#time');  
 startTimer(tenMinutes, display);

}

Aber leider hatte dies auch keine Auswirkung. 100 Versuche / Anpassungen später (und umkehren, da sie nicht funktionierten) Ich habe es mit Jquery erneut versucht, aber geändert, um:

jQuery(function ($) {
    var tenMinutes = 60 * 10,
        display = $('#time');
    startTimer(tenMinutes, display);
});

Und Kombinieren der Funktion JavaScript und der obigen Funktion Jquery in demselben SCRIPT-Tag durch Ändern von <SCRIPT LANGUAGE="JavaScript"> in <SCRIPT>

Und das hat den Trick gemacht! Habe es jetzt zum Laufen gebracht!