teratail
回答率
85.31%
teratail header banner
teratail header banner
質問するログイン新規登録
トップJavaScriptに関する質問javascriptで入力された値を取得してalertしたい

編集履歴

回答編集履歴

8

修正

2023/02/21 02:54

投稿

iFQ7Vj
iFQ7Vj

スコア52

test CHANGED
@@ -12,11 +12,11 @@
12
12
  <button id="judge">ボタン</button>
13
13
  </body>
14
14
  <script type="text/javascript" language="javascript">
15
- const judge = document.getElementById('judge');
15
+ const Judge = document.getElementById('judge')
16
- judge.addEventListener("click", () => {
16
+ Judge.addEventListener("click", () => {
17
- let inputNumber = document.getElementById("myInput").value;
17
+ let inputNumber = document.getElementById("myInput").value;
18
- alert(inputNumber);
18
+ alert(inputNumber);
19
- })
19
+ })
20
20
  </script>
21
21
  ```
22
22
 
@@ -27,7 +27,7 @@
27
27
  <button id="judge">ボタン</button>
28
28
  </body>
29
29
 
30
- <script type="text/javascript">
30
+ <script type="text/javascript">
31
31
 
32
32
  const input = document.getElementById("input");
33
33
  const judge = document.getElementById('judge');

7

修正

2023/02/21 02:48

投稿

iFQ7Vj
iFQ7Vj

スコア52

test CHANGED
@@ -14,12 +14,13 @@
14
14
  <script type="text/javascript" language="javascript">
15
15
  const judge = document.getElementById('judge');
16
16
  judge.addEventListener("click", () => {
17
- alert(document.getElementById("myInput").value);
17
+ let inputNumber = document.getElementById("myInput").value;
18
+ alert(inputNumber);
18
19
  })
19
20
  </script>
20
21
  ```
21
22
 
22
- コメントでご指摘を頂いたので私ならこう書く、というものを載せておきます
23
+ コメントでご指摘を頂いたので私ならこう書く、というコードも載せておきます
23
24
  ```html
24
25
  <body>
25
26
  <input type="number" id="input">

6

修正

2023/02/21 02:45

投稿

iFQ7Vj
iFQ7Vj

スコア52

test CHANGED
@@ -11,15 +11,29 @@
11
11
  <input type="text" id="myInput">
12
12
  <button id="judge">ボタン</button>
13
13
  </body>
14
+ <script type="text/javascript" language="javascript">
15
+ const judge = document.getElementById('judge');
16
+ judge.addEventListener("click", () => {
17
+ alert(document.getElementById("myInput").value);
18
+ })
19
+ </script>
20
+ ```
14
21
 
22
+ コメントでご指摘を頂いたので私ならこう書く、というものを載せておきます
23
+ ```html
24
+ <body>
15
- <script type="text/javascript" language="javascript">
25
+ <input type="number" id="input">
26
+ <button id="judge">ボタン</button>
27
+ </body>
16
28
 
29
+ <script type="text/javascript">
30
+
17
- const myInput = document.getElementById("myInput");
31
+ const input = document.getElementById("input");
18
32
  const judge = document.getElementById('judge');
19
33
 
20
- judge.addEventListener("click", () => {
34
+ judge.onclick = function() {
21
- alert(myInput.value);
35
+ alert(input.value);
22
- })
36
+ }
23
37
  </script>
24
38
 
25
39
  ```

5

修正

2023/02/20 15:12

投稿

iFQ7Vj
iFQ7Vj

スコア52

test CHANGED
@@ -1,10 +1,10 @@
1
- ``let inputNumber = document.getElementById("myInput").value;``
1
+ 前提として、``.value``は "呼ばれた時点での要素の値" となります。
2
2
 
3
- このコードでは、最初に呼ばれた一度だけ``inputNumbet``に値を保存し、その後再代入をしていません。
3
+ ここで、``let inputNumber = document.getElementById("myInput").value;``は、最初に "一度だけ" 呼ばれ、その時点での値を``inputNumbet``に保存します。
4
- そのため、プログラム中で``inputNumbet``は、常に "最初の値" (何も入力されていない文字列)が残り続けます。
4
+ そのため、プログラム中で``inputNumbet``は、常に "最初の値" (空の文字列)が残り続けます。
5
5
 
6
+ しかし、今回行いたい処理は、ボタンがクリックされた時点の値を表示することですので、``click``イベントが起こるたびにその時の値を読み取れば良いわけです。
6
- 随時``myInput``内の値を読みたいのでしたら、その都度``.value``で "その時の値" を参照してあげる必要があります。
7
+ ですから、イベントの関数内で``.value``を使用し、ボタンがクリックされたときの値を読み取るようにする必要があります。
7
- 今回は、``click``イベントが起こるたびにその時の値を読みたいので、イベントの関数内で``.value``を使用しましょう。
8
8
 
9
9
  ```html
10
10
  <body>

4

修正

2023/02/20 14:50

投稿

iFQ7Vj
iFQ7Vj

スコア52

test CHANGED
@@ -1,12 +1,12 @@
1
1
  ``let inputNumber = document.getElementById("myInput").value;``
2
2
 
3
3
  このコードでは、最初に呼ばれた一度だけ``inputNumbet``に値を保存し、その後再代入をしていません。
4
- そのため、プログラム中で``inputNumbet``は、常に最初の``myInput``内の値が残り続けます。
4
+ そのため、プログラム中で``inputNumbet``は、常に "最初の値" (何も入力されていない文字列)が残り続けます。
5
5
 
6
- 随時``myInput``内の値を読みたいのでしたら、その都度``.value``で参照してあげる必要があります。
6
+ 随時``myInput``内の値を読みたいのでしたら、その都度``.value``で "その時の値" を参照してあげる必要があります。
7
- このコードでは、``click``イベントが起こるたびに参照したいので、イベントの関数内で毎回``.value``の値を読み取りましょう。
7
+ 今回は、``click``イベントが起こるたびにその時の値を読みたいので、イベントの関数内で``.value``を使用しましょう。
8
8
 
9
- ```JavaScript
9
+ ```html
10
10
  <body>
11
11
  <input type="text" id="myInput">
12
12
  <button id="judge">ボタン</button>

3

修正

2023/02/20 14:42

投稿

iFQ7Vj
iFQ7Vj

スコア52

test CHANGED
@@ -4,7 +4,7 @@
4
4
  そのため、プログラム中で``inputNumbet``は、常に最初の``myInput``内の値が残り続けます。
5
5
 
6
6
  随時``myInput``内の値を読みたいのでしたら、その都度``.value``で参照してあげる必要があります。
7
- このコードでは、``click``イベントが起こるたびに参照したいので、イベントの関数内で毎回``.value``で値を読み取りましょう。
7
+ このコードでは、``click``イベントが起こるたびに参照したいので、イベントの関数内で毎回``.value``の値を読み取りましょう。
8
8
 
9
9
  ```JavaScript
10
10
  <body>

2

修正

2023/02/20 14:40

投稿

iFQ7Vj
iFQ7Vj

スコア52

test CHANGED
@@ -3,7 +3,8 @@
3
3
  このコードでは、最初に呼ばれた一度だけ``inputNumbet``に値を保存し、その後再代入をしていません。
4
4
  そのため、プログラム中で``inputNumbet``は、常に最初の``myInput``内の値が残り続けます。
5
5
 
6
- 随時``myInput``内の値を読みたいのでしたら、その時の値を``.value``で参照しましょう。
6
+ 随時``myInput``内の値を読みたいのでしたら、その都度``.value``で参照してあげる必要があります。
7
+ このコードでは、``click``イベントが起こるたびに参照したいので、イベントの関数内で毎回``.value``で値を読み取りましょう。
7
8
 
8
9
  ```JavaScript
9
10
  <body>

1

修正

2023/02/20 14:33

投稿

iFQ7Vj
iFQ7Vj

スコア52

test CHANGED
@@ -1,6 +1,9 @@
1
1
  ``let inputNumber = document.getElementById("myInput").value;``
2
+
2
- このコードでは、最初に呼ばれた一度だけ``inputNumbet``に値を保存し、その後変更は加えないので、プログラム中での``inputNumbet``の値は常に最初のデータとなります。
3
+ このコードでは、最初に呼ばれた一度だけ``inputNumbet``に値を保存し、その後再代入をしていません。
4
+ そのため、プログラム中で``inputNumbet``は、常に最初の``myInput``内の値が残り続けます。
5
+
3
- 随時``myInput``内の値を読みたいのでしたら、その時のデータを``.value``で参照しましょう。
6
+ 随時``myInput``内の値を読みたいのでしたら、その時の値を``.value``で参照しましょう。
4
7
 
5
8
  ```JavaScript
6
9
  <body>