[解決済み] 入力テキストボックスでJavascriptの値が動作しない

質問

javascriptを使用して入力ボックスからテキストを取得する方法について調べたところ、すべての投稿で.valueを使用するように書かれていましたが、私は"undefined"を取得し続けています。 .valueを使うと、inputタグの中のvalue = ""を探し、それがないとわかると、"undefined".と返されるからだと思います。

ユーザーが書いたテキストを取得して、アラートに表示しようとしています。

HTMLです。

<input id='myText' type="text">
<input id = 'bot'type="button" value="Click Me">

JSです。

var textValue = document.querySelector("#myText").value;
var clickBot = document.querySelector("#bot")

clickBot.addEventListener("click",function(){
alert(textValue)
})

入力すると

<input id='myText' type="text" value = 'works'>

そして、ボタンをクリックすると、"works"というアラートが表示されます。

解決方法は？

クリックハンドラの内部でテキストフィールドの値を取得する必要があります。そうしないと、ハンドラを実行するたびに同じ値が表示されるだけです。

var clickBot = document.querySelector("#bot")

clickBot.addEventListener("click",function(){
    var textValue = document.querySelector("#myText").value;
    alert(textValue);
})