javascriptで入力された値を取得してalertしたい

実現したいこと

入力された要素を取得してalertで表示したい。

前提

javascriptを使用しています

発生している問題・エラーメッセージ

下記のようなコードでinputに入力された値を取得してalert したいのですが、ボタンを押しても入力された数字が表示されず、空のアラートが出てしまいます。非常に初歩的な質問にはなりますが、ご回答していただければ幸いです。

該当のソースコード

javascript
1<body>
2    <input type="text" id="myInput">
3    <button id="judge">ボタン</button>
4</body>
5<script  type="text/javascript" language="javascript">
6let inputNumber = document.getElementById("myInput").value;
7
8const Judge = document.getElementById('judge')
9Judge.addEventListener("click", () => {
10    alert(inputNumber);
11})
12</script>

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

退会済みユーザー

2023/02/20 14:18 編集

ブラウザのディベロッパーツールを使ってデバッグしてください。あなたの環境で今すぐにでもデバッグができるのはあなただけなのです。回答者・閲覧者はデバッガではありません。

meg_

2023/02/20 15:50

調べたこと・試したことは何もないのでしょうか？

行動規範の内容に同意します

回答2件

ベストアンサー

前提として、.valueは "呼ばれた時点での要素の値" となります。

ここで、let inputNumber = document.getElementById("myInput").value;は、最初に "一度だけ" 呼ばれ、その時点での値をinputNumbetに保存します。
そのため、プログラム中でinputNumbetは、常に "最初の値" (空の文字列)が残り続けます。

しかし、今回行いたい処理は、ボタンがクリックされた時点の値を表示することですので、clickイベントが起こるたびにその時の値を読み取れば良いわけです。
ですから、イベントの関数内で.valueを使用し、ボタンがクリックされたときの値を読み取るようにする必要があります。

html
1<body>
2    <input type="text" id="myInput">
3    <button id="judge">ボタン</button>
4</body>
5<script  type="text/javascript" language="javascript">
6const Judge = document.getElementById('judge')
7Judge.addEventListener("click", () => {
8    let inputNumber = document.getElementById("myInput").value;
9    alert(inputNumber);
10})
11</script>

コメントでご指摘を頂いたので私ならこう書く、というコードも載せておきます

html
1<body>
2    <input type="number" id="input">
3    <button id="judge">ボタン</button>
4</body>
5
6<script type="text/javascript">
7
8    const input = document.getElementById("input");
9    const judge = document.getElementById('judge');
10
11    judge.onclick = function() {
12        alert(input.value);
13    }
14</script>
15

投稿2023/02/20 14:27

編集2023/02/21 02:54

iFQ7Vj

総合スコア52

yambejp

2023/02/21 00:33 編集

元の質問が悪いのですがscriptタグのlanguage属性は非推奨です

iFQ7Vj

2023/02/21 02:57

ありがとうございます、なるべく元のコードは崩したくないので両方書いておきます

行動規範の内容に同意します

期待する動作のコードは下記になります。

html
1<body>
2    <input type="text" id="myInput">
3    <button id="judge">ボタン</button>
4</body>
5<script  type="text/javascript" language="javascript">
6
7
8const Judge = document.getElementById('judge')
9Judge.addEventListener("click", () => {
10    let inputNumber = document.getElementById("myInput").value;
11    alert(inputNumber);
12})
13</script>

説明

修正前のコードでは、読み込まれたときのvalueは空っぽの状態です。
テキストボックスに何か入力してクリックしたとしても、もともと読み込まれているvalueが変わるわけではありません。（空っぽの文字列が読み込まれてアラートに表示されるだけです）
上記のように「クリックした時点のvalue」をよみ取る必要があります。

投稿2023/02/20 14:19

退会済みユーザー

総合スコア0