nie łapie wartości z formularza do zmiennej

pytanie zadane 24 kwietnia 2017 w JavaScript przez czujek22 Dyskutant (7,670 p.)

Cześć. Mam dość głupi błąd. Mianowicie, w zmiennej login nie mam wgl wartości pobranej z formularza. Próbowałem też getElementById i przenosiłem skrypt przed </body>. W head wgl nie wyświetla alerta, przed </body > wyświetla pustego alerta.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Formularz i skrypt</title>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript">
      var myButton = document.querySelector(".btn");
      var login = document.register.login.value;

      myButton.addEventListener("click", function(){
              alert(login);
      }, false);
    </script>
  </head>
  <body>
    <div class="container">
      <form class="f1" name="register">
        <div class="szyk"><label for="login">Login:</label>
        <input type="text" name="login" id="login"></div>
        <div id="klogin"></div>
        <div class="szyk"><label for="pass">Hasło:</label>
        <input type="password" name="pass" id="pass"></div>
        <div class="szyk"><label for="pass2">Powtórz hasło:</label>
        <input type="password" name="pass2" id="pass2"></div>
        <div class="szyk"><label for="email">E-mail:</label>
        <input type="text" name="email" id="email"></div>
        <div class="szyk"><label for="plec">Płec:</label>
        <input type="radio" name="plec" id="plec" value="kobieta" checked> K
        <input type="radio" name="plec" id="plec" value="mezczyzna"> M</div>
        <button type="button" class="btn">Zarejestruj</button>
      </form>
    </div>
  </body>
</html>