document.getElementById("count").value;　の値の取得について

前提・実現したいこと

document.getElementById("count").value;
でvalueが取得されるタイミング？について疑問が発生しましたので質問いたします。

以下のようなJavaScriptの練習問題があります．
**「購入する」ボタンをクリックしたときに次の各状況に応じて、適切なメッセージを警告ウィンドウに表示されるようにプログラムを作成しましょう。

入力されていない時 → 「入力してください」と警告ウィンドウに表示する
0未満、または 100よりも大きな数字が入力された場合 → 「購入できる数は 100個までです」と警告ウィンドウに表示する
それ以外の場合 → 「ありがとうございました」と警告ウィンドウに表示する**

valueを取得するタイミングによって結果が変わってしまうのが腑に落ちず，どなたか解説していただければ幸いです．

発生している問題

このように書くと正常に動くのですが，

 <body>
    <h2>いくつ購入しますか？（100コまで）</h2>
    <p><input id="count" type="number"> <button id = "buy">購入する</button></p>
    <script>
      var element1 = document.getElementById("count");
      var element2 = document.getElementById("buy");
      element2.addEventListener("click", function(){
        if (element1.value === ""){
          alert("入力してください");
          }else if(element1.value < 0 || element1.value > 100){
            alert("購入できる数は 100個までです");
          }else{
            alert("ありがとうございました");
          }
      });
      
    </script>
  </body>

次のように，element1のvalueをif文の外で取得するように書くと常に最初のif に入ってしまいます．

<body>
    <h2>いくつ購入しますか？（100コまで）</h2>
    <p><input id="count" type="number"> <button id = "buy">購入する</button></p>
    <script>
      var element1 = document.getElementById("count").value;
      var element2 = document.getElementById("buy");
      element2.addEventListener("click", function(){
        if (element1 === ""){
          alert("入力してください");
          }else if(element1 < 0 || element1 > 100){
            alert("購入できる数は 100個までです");
          }else{
            alert("ありがとうございました");
          }
      });
      
    </script>
  </body>