teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

追記

2021/10/04 14:02

投稿

itagagaki
itagagaki

スコア8402

answer CHANGED
@@ -9,4 +9,41 @@
9
9
  が実行されています。
10
10
  当然`get.value`は空ですよね。
11
11
 
12
- ボタンが押されたときに値を取得するように制御する必要があるということです。
12
+ ボタンが押されたときに値を取得するように制御する必要があるということです。
13
+
14
+ ---
15
+
16
+ リクエストがあったので…
17
+
18
+ ```HTML
19
+ <!DOCTYPE html>
20
+ <html lang="ja">
21
+ <head>
22
+ <meta charset="UTF-8">
23
+ <title>サンプル</title>
24
+ </head>
25
+ <body>
26
+
27
+ <p>
28
+ <input type="text" id="nameText">
29
+ <input type="button" value="Check" id="checkButton" onclick="buttonClick();">
30
+ </p>
31
+
32
+ <p id="msg"></p>
33
+ <p id="mm"></p>
34
+
35
+ <script>
36
+ const valueList = ['リンゴ', 'バナナ', 'メロン'];
37
+ const nameText = document.getElementById("nameText");
38
+ const msg = document.getElementById('msg');
39
+ const mm = document.getElementById('mm');
40
+ function buttonClick() {
41
+ let inputValue = nameText.value;
42
+ msg.innerText = inputValue;
43
+ mm.innerText = valueList.indexOf(inputValue);
44
+ }
45
+ </script>
46
+
47
+ </body>
48
+ </html>
49
+ ```