Javascriptのグローバル変数にテキストの値を代入したい

Question

前提・実現したいこと

javascript初学者です。
以下、練習用のコードにてグローバル変数にテキストの値を代入し変数として使いたいと思っています。
関数内の代入だと取得できているのですが、グローバル変数として代入すると取得できません。
グローバル変数にテキストボックスの値を取得し代入しても関数内で使えないのでしょうか？
ご教授いただけますと幸いです。

<p>
   <label>数値１：<input type="text" id="text1"></label>
</p>
<p>
   <label>数値２：<input type="text" id="text2"></label>
</p>
<p>
   <label>数値３：<input type="text" id="text3"></label>
</p>
<button type="button" id = "btnClick">最小値</button>

let element1 = document.getElementById('text1').value;
const element2 = document.getElementById('text2').value;
let test1 = 1234

const txtMsg = () => {
  msg.innerText = '最小値は' + getMin() + 'です';
}
const getMin = () => {
  let element3 = document.getElementById('text3').value;

  let min = element1;
  console.log(element1)
  console.log(element2)
  console.log(element3)
  console.log(test1)

  if (min > element2 || min > element3){
    if(element2 > element3){
      min = element3;
    }else{
      min = element2;
    }
  }
  return min
}
const btnClick = document.getElementById('btnClick');
btnClick.addEventListener('click',txtMsg);

試したこと

関数getMin内のconsole.logの結果は、
element1 空白
element2 空白
element3 テキストボックスの数値
test1 1234
となります。

Comments

[maisumakun]

当該のJavaScriptは、どのようなタイミングで実行されていますか？

Answer 1

グローバル変数として代入すると取得できません。

いえ、取得できています。代入を実行した時点では、デフォルト値の指定がないため入力欄は空欄であり、その値を取得しています。

その後、入力フォームの値が変化しても、代入した値に影響はありません。

Comments

[sho.cat]

ご回答ありがとうございます。
空白を取得していたことに気が付きませんでした。
解決できました。ありがとうございます。

Answer 2

getMinを実行した時点でのテキストボックスの内容を取得したいということでしょうか?
それであれば、このコードでは無理です。グローバル変数に代入されるのは、そのコードが実行された時点でのテキストボックスの内容であって、テキストボックスの内容が変更されたとしても、グローバル変数は変化しませんから。

let i = 1;
let j = i;

i = 2;

としても、jの値が変わらないのと同じです。

let element1 = document.getElementById('text1');

としたうえで、getMin内で

console.log(element1.text);

とすれば、とれるはずですけど。

Comments

[sho.cat]

ご回答ありがとうございます。
コードの実行処理タイミングを間違えて覚えていました。
解決することができました。ありがとうございます。