Untitled

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://code.jquery.com/jquery-latest.js"></script>

    <script>


            $( document ).ready(function() {
                // Obige Function stellt sicher, dass sämtlicher nachfolgender code erst ausgeführt wird, wenn das gesamte Dokument geladen ist. Sonst kann es dazu kommen, dass Javascript den "berechnen_button" sucht aber, der noch gar nicht exisitert, weil das Dokument noch gar nicht soweit geparsed ist. Also JS einfach alles hierein ballern. Viele Entwickler gehen dazu über, JS einfach im Footer zu laden, also dann wenn die gesamte Seite geladen ist. Spart paar Millisekunden Ladezeit :D.

                $("#berechnen_button").on("click", function() {
                    // Obige Funktion ist JQuery Schreibweise und Alternative zu den onclick="" im HTML Attribut. Ist ein Listener, der einfach darauf wartet, dass der Button gefired wird :D.
                    // JQuery ist eigentlich immer so aufgebaut. Erst der Selector des Elements (hier: $("#berechnen_button") und danach das was passieren soll. Bspw. kannst du den button auch ganz einfach mit JQuery ausfaden: $("#berechnen_button").fadeOut();
                    var loginStunde = parseInt($("#login_stunde").val());
                    // Wieder der Selector und das Auslesen des Values des Formularfelds in JQuery Schreibweise (.val()). Danach nur noch Umwandlung von String zu Integer

                    var loginMinute = parseInt($("#login_minute").val());
                    var logoutMinute = loginMinute + 24;
                    var logoutStunde = loginStunde + 9;
                    alert(logoutStunde+":"+logoutMinute);
                });
            });

    </script>

    <title>Test</title>
  </head>

  <body>

    <h2> Logout Rechner </h2>
    Login Zeit: <input type="text" min="0" max="12" size="2" id="login_stunde" maxlength="2" value="6">:<input type="text" id="login_minute" min="0" max="59" size="2" maxlength="2" value="10">
    <input type="button" value="Berechnen" id="berechnen_button"> <br> <br>
    Logout um:  <input type="text" name="logoutZeit" size="4" disabled> <br>


  </body>

</html>