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

回答編集履歴

1

サンプルコードの追加

2020/05/25 11:15

投稿

snogot
snogot

スコア134

answer CHANGED
@@ -1,3 +1,32 @@
1
1
  第一段階として、まずHTMLとJavaScriptだけで目的を満たすコードをハードコーディングしてみる、
2
2
  というアプローチはいかがでしょうか?
3
- これができれば、第二段階としてハードコーディング部分をejsで自動生成するように実装すればよいです。
3
+ これができれば、第二段階としてハードコーディング部分をejsで自動生成するように実装すればよいです。
4
+
5
+ 2020/05/25 20:15 ごろ追記
6
+ 第一段階のサンプルを作ってみました。
7
+ htmlファイルを作成し、コードを全部貼り付ければ動作確認できるかと思います。
8
+
9
+ ```HTML
10
+ <label>
11
+ <span>名前</span>
12
+ <select id="username">
13
+ <option value="">
14
+ <option value="user1@mail.com">user1
15
+ <option value="user2@mail.com">user2
16
+ </select>
17
+ </label>
18
+ <label>
19
+ <span>メールアドレス</span>
20
+ <input id="mail">
21
+ </label>
22
+ <script>
23
+ document.getElementById("username").addEventListener('change', changeName);
24
+ function changeName() {
25
+ const username = document.getElementById("username");
26
+ const mail = document.getElementById("mail");
27
+ mail.value = username.value;
28
+ }
29
+ </script>
30
+ ```
31
+
32
+ 上記コードのうち、option要素をejsタグで作成すれば要望を満たせないでしょうか?