質問編集履歴

3

書式改善

2021/06/21 11:08

投稿

fefefe
fefefe

スコア1

test CHANGED
File without changes
test CHANGED
@@ -4,11 +4,19 @@
4
4
 
5
5
  初心者です。単語帳を作ろうとしています。
6
6
 
7
+
8
+
9
+ **【実現したいこと】**
10
+
7
- selectにoptionを新規追加できようコードを書いてみましたが、思うようにいきません
11
+ **textareaから値を取得して、その値でselectにoptionを新規追加る。**
8
12
 
9
13
 
10
14
 
15
+ **【現状】**
16
+
11
- **確かに”登録”を押すと一時的にoptionが増え、選択ができるようになるのですが、ページを更新(F5)すると消えてしまいます。**
17
+ **確かに”登録”を押すと一時的にoptionが増え、選択ができるようになるが、ページを更新(F5)すると消え。**
18
+
19
+  
12
20
 
13
21
 
14
22
 
@@ -40,29 +48,13 @@
40
48
 
41
49
  <textarea rows="1" cols="30" id="newCategory" placeholder=" 新しいカテゴリーをつくる"></textarea>
42
50
 
43
-
44
-
45
- <p class="form__title">問題文</p>
46
-
47
- <textarea rows="15" cols="60" id="Q"></textarea>
48
-
49
- <p class="form__title">答え</p>
50
-
51
- <textarea rows="3" cols="60" id="Aa"></textarea>
52
-
53
- <p class="form__title">答え2</p>
54
-
55
- <textarea rows="15" cols="60" id="Ab"></textarea>
56
-
57
-
58
-
59
51
 
60
52
 
61
53
  <button type="submit" name="登録" id="click" onclick="onButtonClick()">登録</button>
62
54
 
55
+ </main>
63
56
 
64
57
 
65
- </main>
66
58
 
67
59
  <script type="text/javascript">
68
60
 
@@ -86,28 +78,6 @@
86
78
 
87
79
  select.appendChild(categoryId); //セレクトに作成したオプションを追加
88
80
 
89
-
90
-
91
- const Q = document.getElementById("Q").value; //textareaの各値を取得↓
92
-
93
- const Aa = document.getElementById("Aa").value;
94
-
95
- const Ab = document.getElementById("Ab").value;
96
-
97
-
98
-
99
- const data = []; //各値を配列に格納↓
100
-
101
- data.push({Q,Aa,Ab});
102
-
103
- localStorage.setItem(categoryName, JSON.stringify(data)); //localStrageにJSON文字列で保存
104
-
105
-
106
-
107
- categoryLength.selectedIndex = -1; //処理後、カテゴリを未選択にする
108
-
109
-
110
-
111
81
  };
112
82
 
113
83
 

2

書式整理

2021/06/21 11:08

投稿

fefefe
fefefe

スコア1

test CHANGED
File without changes
test CHANGED
@@ -28,7 +28,7 @@
28
28
 
29
29
  ### 該当のソースコード
30
30
 
31
-
31
+ ```ここに言語を入力
32
32
 
33
33
  <p>カテゴリー選択</p>
34
34
 
@@ -113,3 +113,5 @@
113
113
 
114
114
 
115
115
  </script>
116
+
117
+ ```

1

書式整理

2021/06/21 11:00

投稿

fefefe
fefefe

スコア1

test CHANGED
File without changes
test CHANGED
@@ -42,15 +42,15 @@
42
42
 
43
43
 
44
44
 
45
- <p class="form__title">問題文</p> <!-- Q 問題文 -->
45
+ <p class="form__title">問題文</p>
46
46
 
47
47
  <textarea rows="15" cols="60" id="Q"></textarea>
48
48
 
49
- <p class="form__title">答え</p> <!-- Aa 答え1 -->
49
+ <p class="form__title">答え</p>
50
50
 
51
51
  <textarea rows="3" cols="60" id="Aa"></textarea>
52
52
 
53
- <p class="form__title">答え2</p> <!-- Ab 答え2 -->
53
+ <p class="form__title">答え2</p>
54
54
 
55
55
  <textarea rows="15" cols="60" id="Ab"></textarea>
56
56
 
@@ -80,15 +80,15 @@
80
80
 
81
81
  categoryId.id = "category"+categoryLength.length+1;
82
82
 
83
- categoryId.innerHTML = categoryName; //IDをもとにオプションに値を追加
83
+ categoryId.innerHTML = categoryName; //IDをもとにオプションに値を追加
84
84
 
85
85
 
86
86
 
87
- select.appendChild(categoryId); //セレクトに作成したオプションを追加
87
+ select.appendChild(categoryId); //セレクトに作成したオプションを追加
88
88
 
89
89
 
90
90
 
91
- const Q = document.getElementById("Q").value; //textareaの各値を取得↓
91
+ const Q = document.getElementById("Q").value; //textareaの各値を取得↓
92
92
 
93
93
  const Aa = document.getElementById("Aa").value;
94
94
 
@@ -96,7 +96,7 @@
96
96
 
97
97
 
98
98
 
99
- const data = []; //各値を配列に格納↓
99
+ const data = []; //各値を配列に格納↓
100
100
 
101
101
  data.push({Q,Aa,Ab});
102
102
 
@@ -104,7 +104,7 @@
104
104
 
105
105
 
106
106
 
107
- categoryLength.selectedIndex = -1; //処理後、カテゴリを未選択にする
107
+ categoryLength.selectedIndex = -1; //処理後、カテゴリを未選択にする
108
108
 
109
109
 
110
110