Formular absenden nach Ablauf des Countdowns

[Rolf b]

Edit: Parallelpost zu Gunnar :)

Dein Code hat gleich mehrere Probleme. Nur den Type Error hat er eigentlich nicht, DEN kann ich nicht nachvollziehen. Das muss etwas sein, das im Kontext deiner Seite stattfindet aber hier nicht sichtbar ist.

Zum einen: manche Abfragen sind gleicher als andere. Ich will Dir Gunnars Quiz aber nicht verderben. Du kommst bestimmt selbst drauf. Generation von C Programmierern haben diesen Fehler schon vor Dir gemacht.

Zum zweiten: Zuweisen von 'i' an das Zeitanzeigefeld ergibt die Zeichenkette 'i' und nicht den Wert der Variablen i. Verwende i.toString(). Bzw. etwas anderes, siehe unten.

Zum dritten ist setTimeout keine Funktion zum Warten in einer Schleife. Diese Denke funktioniert in JavaScript nicht. JavaScript ist wie eine heiße Kartoffel: Anpacken, schnell damit hantieren und wieder weg damit. Denn solange ein Script läuft, blockiert der Browser.

Mit setTimeout registriert man eine Funktion, die nach Ablauf einer gewissen Zeit aufgerufen werden soll. Um einen kontinuierlichen Aufruf im Sekundentakt zu erreichen, kann diese Funktion sich zum Schluss selbst erneut mit setTimeout zum Aufruf registrieren.

Einfacher ist es aber, setInterval zu verwenden, damit registriert man eine Funktion zum ständigen Neuaufruf in einem bestimmten Zeitabstand. Normalerweise müsste man diese Funktion auch wieder deregistrieren, aber wenn Du dein Form submittest, wird die Seite neu geladen und damit werden registrierte Intervallfunktionen entfernt.

Deine Zeitanzeige wird nun aber unregelmäßig springen. Das liegt daran, dass ein Intervall von 1000 Millisekunden nie genau eingehalten wird. Du solltest 100ms als Intervallzeit setzen. Vorher speicherst Du Dir in einer Variablen startZeit = Date.now(). In der Intervall-Funktion berechnest Du laufZeit = (Date.now()-startZeit)/1000. Die kannst Du mit 60 vergleichen, und für die Anzeige der Restzeit gibst Du Math.floor(60-laufZeit) aus.

So, ich hoffe, damit hast Du genug Ideen für eine erfolgreiche Umsetzung :)

Rolf