Javascript Countdown mit Nutzereingabe

filiop

Grünschnabel
Ich möchte einen Countdown programmieren bei dem der Nutzer in ein Formular (welches ich schon zusammengeschustert habe) Minuten und Sekunden eingaben kann. Nach einem Click auf einen Button soll das Formular verschwinden und der Countdown im Format xx:xx erscheinen.
Bei Ablauf des Countdowns soll ein Alert mit dem Text 'Die Zeit ist Abgelaufen!' erscheinen.

Ich bin Anfänger und weiß nicht wirklich wie ich das Script für den Countdown machen kann.
Das Form, welches ich schon habe befindet sich unten. Ich würde mich über Hilfe sehr freuen!
Vielen Dank im Vorraus!

HTML:
           <form>
                <label for= "minuten">Minuten:
                    <input type="number" id="minuteneingabe" min="0" max="59">
                </label>
                <label for= "sekunden">Sekunden:
                    <input type="number" id="sekundeneingabe" min="0" max="59">
                </label>
                   
                    <input type="button" id="bt1" onclick="settimer();" value="Countdown starten">
             </form>
 
Mein Problem ist vor allem, dass ich nicht weiß wie ich den Userinput in die function bekomme und wie ich das Formular verschwinden lasse.
 
Du kannst die Eingabe der Zeit mittels getElementById und dem value Attribut auslesen.

Javascript:
document.getElementById('minuteneingabe').value
Dies funktioniert natürlich auch für die Sekunden.

Die einfachste Variante das Formular "verschwinden" zu lassen ist, das du dem Formular das Style display auf none zu setzen.
So z.B. wenn das Formular die ID form_zeiteingabe hat.

Javascript:
document.getElementById('form_zeiteingabe').style.display = 'none';
Eine andere Variante wäre das Formular aus dem DOM-Tree zu entfernen. Allerdings hat man mit der display none Variante die Möglichkeit das Formular wieder anzeigen zu lassen, ohne das man Formular wieder zusammenbaut oder die Seite neu lädt.
 
Zurück