[Javascript] Alter berechnen

Tomsen · 4. Juni 2013

Hey,

wie kann ich dynamisch das Alter berechnen sobald in ein Input "tag" "monat" "jahr" alles eingetragen wurde?
Daneben soll die Zahl dann erscheinen.

- Tom

rinukkusu · 5. Juni 2013

HTML

<html>
        <head>
                <title>js test</title>
                <script>
                        function calcAge()
                        {
                                var day = document.getElementsByName("day")[0].value;
                                var month = document.getElementsByName("month")[0].value;
                                var year = document.getElementsByName("year")[0].value;


                                var today = new Date();
                                var birthdate = new Date(year, month, day);


                                var age = today.getFullYear() - birthdate.getFullYear();
                                var m = today.getMonth() - birthdate.getMonth();


                                if (m < 0 || (m === 0 && today.getDate() < birthdate.getDate())) {
                                        age--;
                                }


                                document.getElementsByName("age")[0].innerHTML = age;
                        }
                </script>
        </head>


        <body>
                Tag: <input type="text" name="day" onkeydown="calcAge();" /><br />
                Monat: <input type="text" name="month" onkeydown="calcAge();" /><br />
                Jahr: <input type="text" name="year" onkeydown="calcAge();" /><br />
                Alter: <span name="age"></span>
        </body>
</html>

Alles anzeigen

Hab hier mal fix was gebastelt :3

Hier testbar: http://rinukkusu.sub-r.de/test/datetest.html

Tomsen · 6. Juni 2013

@rinukkusu

Cooool. Danke.

Noch eine Frage:

Kann ich es auch machen das es erst das Alter errechnet wenn man alle 3 Felder ausgefüllt hat?
Meine Lösung wäre jetzt das Attribut
onkeydown="calcAge();"

nur bei dem letzten Input year mit reinzupacken, weil man das ja zuletzt eingibt und wenn man da fertig ist soll es das ausrechnen.

Aber kann ich, um ein besseres und sichereres System zu schaffen es auch so machen das ich jedes mal vor dem berechnen erst abfrage ob alle ausgefüllt sind?
Wenn ja wie würde das aussehen?

Danke schonmal.

Achja, wenn ich 06,11,1996 eingebe errechnet er immer 1813.
//Edit: Wenn ich die 06 dann auf 6 änder ists 16.

- Tom

xGreekz7x · 6. Juni 2013

du kannst ja abfragen ( strlen ) ob es auf 0 ist, wenn ja ersetzt du es mit 1, dann
rechnet er immer erst den 1.1.xxxx

maddin · 6. Juni 2013

Ich war mal so frei und hab den Code von rinukkusu etwas geändert: http://jsfiddle.net/Myt7Z/
Das mit den 1813 sollte nun nicht mehr kommen, und es wird auch nur berechnet wenn alle Felder ausgefüllt sind. Hatte zufällig noch sowas in meinen Schnipseln rum fliegen^^

Tomsen · 6. Juni 2013

maddin Vielen Dank.
Eine kleine Bitte hätte ich noch, kann man es so machen das beim letzten Feld abgefragt wird ob es 4 Buchstaben sind oder weniger
Das es erst dann berechnet wenn alle Jahreszahlen korekt drin sind und nicht schon wenn man von 1996 erst die 1 drin hat.

Das wäre echt mega nett.

edit: Achja, wie kann ich es so modifizieren bzw. abfragen das alle zahlen unter 16 die Farbe rot bekommen, alle drüber grün?

- Tom

maddin · 6. Juni 2013

http://jsfiddle.net/Myt7Z/5/
Falls du das mit den Farben ändern willst, dafür ist diese Zeile verantwortlich:

JavaScript

document.getElementsByName("age")[0].style.color = (age < 16) ? "red" : "green";

Mfg.

maddin · 6. Juni 2013

Der Funktioniert so. Siehe jsFiddle^^

Tomsen · 6. Juni 2013

Danke. Jetzt hab ich das endlich hinter mir.

//edit: Kann mir einer der Erfahrung mit PHP und MySQL hat mal helfen, ich hab ein Problem mit der Datenbank. Wenn ich ein Formular absende wird kein Eintrag hinzugefügt.

- Tom

breadfish.de 12. März 2022