teratail
回答率
85.30%
質問するログイン新規登録
トップJavaScriptに関する質問ブラウザをリロードすると、条件分岐で振り分けた<li>タグが、1箇所にまとまってしまうのを直したい。

編集履歴

質問編集履歴

4

2022/01/15 03:02

投稿

oil
oil

スコア11

title CHANGED
File without changes
body CHANGED
@@ -1,272 +1,270 @@
1
- ### 前提・実現したいこと
2
-
3
- ####ブラウザをリロードすると、振り分けた<li>タグが１っ箇所にまとまってしまうのを直したい。
4
-
5
- #####[完成した物](http://deadline.oilblog.net/)
6
-
7
- ### 発生している問題・エラーメッセージ
8
-
9
-
10
- ####JavaScriptで、
11
-
12
- ####TODOリストにラジオボタンで４つの条件分岐を付けて、
13
-
14
- ####４つの<ul>に、appendChild(li);で<li>タグを追加して、
15
-
16
- ####振り分けをした状態のままの保存方法がどうすれば良いのか分かりません。
17
-
18
- ####現状は、document.querySelectorAll("li");で、
19
-
20
- ####<li>タグがまとめて保存されてしまいます。
21
-
22
- ####querySelectorAll("li");をどう変えれば良いのか教えて下さい。
23
-
24
- ####よろしくお願いします。
25
-
26
-
27
- ### 該当のソースコード
28
-
29
- ```JavaScript
30
- const form = document.getElementById("form");
31
- const input = document.getElementById("input");
32
- const ul_0 = document.getElementById("ul_0");
33
- const ul_1 = document.getElementById("ul_1");
34
- const ul_2 = document.getElementById("ul_2");
35
- const ul_3 = document.getElementById("ul_3");
36
- const all_radio = document.getElementById("all_radio");
37
-
38
- // ローカルデータ読み込み
39
- let todos = JSON.parse(localStorage.getItem("todos"));
40
- if (todos) {
41
- // 配列の全要素に対して反復処理
42
- todos.forEach((todo) => {
43
- add(todo);
44
- });
45
- }
46
- // フォームがエンター(submit)された時処理
47
- form.addEventListener("submit", function (event) {
48
- // デフォルトのイベント中止（エンター後のリロード）
49
- event.preventDefault();
50
- // 下記の関数submit後に行いたい処理
51
- add();
52
- });
53
-
54
- function add(todo) {
55
- // フォームに入力された値を取る
56
- let todoText = input.value;
57
-
58
- if (todo) {
59
- todoText = todo.text;
60
- }
61
- // フォームが空の状態でのliタグの追加を防ぐ
62
- if (todoText.length > 0) {
63
- // liタグの作成
64
- const li = document.createElement("li");
65
- // liにフォームに入力された値を入れる
66
- li.innerText = todoText;
67
- // liタグにlist-group-itemクラスの追加、デザインの為
68
- li.classList.add("list-group-item");
69
-
70
- // ラジオボタンの選択された値
71
- let radioNodeList = all_radio.deadline;
72
- let radiobtn = radioNodeList.value;
73
-
74
- switch (radiobtn) {
75
- case "0":
76
- // ul_0の子要素として追加する
77
- ul_0.appendChild(li);
78
- // フォームを空にする
79
- input.value = "";
80
- // ローカルストレージに保存する
81
- saveDate();
82
- break;
83
- case "1":
84
- ul_1.appendChild(li);
85
- input.value = "";
86
- saveDate();
87
- break;
88
- case "2":
89
- ul_2.appendChild(li);
90
- input.value = "";
91
- saveDate();
92
- break;
93
- case "3":
94
- ul_3.appendChild(li);
95
- input.value = "";
96
- saveDate();
97
- }
98
-
99
- if (todo && todo.completed) {
100
- li.classList.add("text-decoration-line-through");
101
- }
102
-
103
- li.addEventListener("contextmenu", function (event) {
104
- // 右クリックイベントブロック
105
- event.preventDefault();
106
- li.remove();
107
- saveDate();
108
- });
109
-
110
- li.addEventListener("click", function () {
111
- li.classList.toggle("text-decoration-line-through");
112
- saveDate();
113
- });
114
- }
115
- }
116
- // li要素を取得して、配列としてまとめておく
117
- function saveDate() {
118
- const lists = document.querySelectorAll("li");
119
- // 空の配列を定義
120
- const todos = [];
121
-
122
- // 配列の全要素に対して反復処理
123
- lists.forEach((li) => {
124
- // todosの配列に追加していく処理
125
- todos.push({
126
- // 入力された値
127
- text: li.innerText,
128
- completed: li.classList.contains("text-decoration-line-through"),
129
- });
130
- });
131
- // jsonでローカルデータ保存
132
- localStorage.setItem("todos", JSON.stringify(todos));
133
- }
134
-
135
- // リセットボタン
136
- const Reset = document.getElementById("Reset");
137
-
138
- Reset.addEventListener("click", function () {
139
- // 子要素全消去
140
- all_ul.innerHTML = "";
141
- window.location.reload();
142
- saveDate();
143
- });
144
-
145
- ```
146
-
147
- ```HTML
148
- <!DOCTYPE html>
149
- <html lang="ja">
150
- <head>
151
- <meta charset="UTF-8" />
152
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
153
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
154
-
155
- <!-- CSS -->
156
- <link
157
- href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
158
- rel="stylesheet"
159
- integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
160
- crossorigin="anonymous"
161
- />
162
-
163
- <title>条件分岐の練習</title>
164
- </head>
165
- <body class="bg-light">
166
- <div class="container w-100">
167
- <h1 class="text-center text-info my-4">納期管理アプリ</h1>
168
-
169
- <form id="all_radio">
170
- <div class="responsibility">
171
- <div class="form-check">
172
- <input
173
- class="form-check-input"
174
- type="radio"
175
- name="deadline"
176
- id="t_t"
177
- value="0"
178
- checked
179
- />
180
- <label class="form-check-label" for="flexRadioDefault2">
181
- 通常業務、通常配送
182
- </label>
183
- </div>
184
- <div class="form-check">
185
- <input
186
- class="form-check-input"
187
- type="radio"
188
- name="deadline"
189
- id="t_k"
190
- value="1"
191
- />
192
- <label class="form-check-label" for="flexRadioDefault1">
193
- 通常業務、緊急配送
194
- </label>
195
- </div>
196
- </div>
197
-
198
- <div class="deadline mt-3">
199
- <div class="form-check">
200
- <input
201
- class="form-check-input"
202
- type="radio"
203
- name="deadline"
204
- id="j_t"
205
- value="2"
206
- />
207
- <label class="form-check-label" for="flexRadioDefault2">
208
- 重要業務、通常配送
209
- </label>
210
- </div>
211
- <div class="form-check">
212
- <input
213
- class="form-check-input"
214
- type="radio"
215
- name="deadline"
216
- id="j_k"
217
- value="3"
218
- />
219
- <label class="form-check-label" for="flexRadioDefault1">
220
- 重要業務、緊急配送
221
- </label>
222
- </div>
223
- </div>
224
- </form>
225
-
226
- <form id="form" class="mt-2 mb-5">
227
- <input
228
- id="input"
229
- class="form-control"
230
- placeholder="納期、送り先を入力"
231
- autocomplete="off"
232
- />
233
- </form>
234
-
235
- <div id="all_ul" class="f-container">
236
- <ul class="list-group text-secondary" id="ul_3">
237
- 重要、緊急
238
- </ul>
239
- <ul class="list-group text-secondary" id="ul_2">
240
- 重要、通常
241
- </ul>
242
- <ul class="list-group text-secondary" id="ul_1">
243
- 通常、緊急
244
- </ul>
245
- <ul class="list-group text-secondary" id="ul_0">
246
- 通常、通常
247
- </ul>
248
- </div>
249
- </div>
250
-
251
- <!-- Resetボタン -->
252
- <div class="d-grid gap-2 col-1 mx-auto pt-5">
253
- <button id="Reset" class="btn btn-primary" type="button">Reset</button>
254
- </div>
255
-
256
- <script src="todo.js"></script>
257
- </body>
258
- </html>
259
-
260
- ```
261
-
262
- ### 試したこと
263
-
264
- 追加する<li>タグに.classNameでクラスの追加や、
265
-
266
- querySelectorで、<ul>タグを保存しようとしましたが、
267
-
268
- 上手くいきませんでした。
269
-
270
- ### 補足情報（FW/ツールのバージョンなど）
271
-
1
+ ### 前提・実現したいこと
2
+
3
+ # ブラウザをリロードすると、振り分けた<li>タグが１っ箇所にまとまってしまうのを直したい。
4
+
5
+ ### 発生している問題・エラーメッセージ
6
+
7
+
8
+ #### JavaScriptで、
9
+
10
+ #### TODOリストにラジオボタンで４つの条件分岐を付けて、
11
+
12
+ #### ４つの<ul>に、appendChild(li);で<li>タグを追加して、
13
+
14
+ #### 振り分けをした状態のままの保存方法がどうすれば良いのか分かりません。
15
+
16
+ #### 現状は、document.querySelectorAll("li");で、
17
+
18
+ #### <li>タグがまとめて保存されてしまいます。
19
+
20
+ #### querySelectorAll("li");をどう変えれば良いのか教えて下さい。
21
+
22
+ #### よろしくお願いします。
23
+
24
+
25
+ ### 該当のソースコード
26
+
27
+ ```JavaScript
28
+ const form = document.getElementById("form");
29
+ const input = document.getElementById("input");
30
+ const ul_0 = document.getElementById("ul_0");
31
+ const ul_1 = document.getElementById("ul_1");
32
+ const ul_2 = document.getElementById("ul_2");
33
+ const ul_3 = document.getElementById("ul_3");
34
+ const all_radio = document.getElementById("all_radio");
35
+
36
+ // ローカルデータ読み込み
37
+ let todos = JSON.parse(localStorage.getItem("todos"));
38
+ if (todos) {
39
+ // 配列の全要素に対して反復処理
40
+ todos.forEach((todo) => {
41
+ add(todo);
42
+ });
43
+ }
44
+ // フォームがエンター(submit)された時処理
45
+ form.addEventListener("submit", function (event) {
46
+ // デフォルトのイベント中止（エンター後のリロード）
47
+ event.preventDefault();
48
+ // 下記の関数submit後に行いたい処理
49
+ add();
50
+ });
51
+
52
+ function add(todo) {
53
+ // フォームに入力された値を取る
54
+ let todoText = input.value;
55
+
56
+ if (todo) {
57
+ todoText = todo.text;
58
+ }
59
+ // フォームが空の状態でのliタグの追加を防ぐ
60
+ if (todoText.length > 0) {
61
+ // liタグの作成
62
+ const li = document.createElement("li");
63
+ // liにフォームに入力された値を入れる
64
+ li.innerText = todoText;
65
+ // liタグにlist-group-itemクラスの追加、デザインの為
66
+ li.classList.add("list-group-item");
67
+
68
+ // ラジオボタンの選択された値
69
+ let radioNodeList = all_radio.deadline;
70
+ let radiobtn = radioNodeList.value;
71
+
72
+ switch (radiobtn) {
73
+ case "0":
74
+ // ul_0の子要素として追加する
75
+ ul_0.appendChild(li);
76
+ // フォームを空にする
77
+ input.value = "";
78
+ // ローカルストレージに保存する
79
+ saveDate();
80
+ break;
81
+ case "1":
82
+ ul_1.appendChild(li);
83
+ input.value = "";
84
+ saveDate();
85
+ break;
86
+ case "2":
87
+ ul_2.appendChild(li);
88
+ input.value = "";
89
+ saveDate();
90
+ break;
91
+ case "3":
92
+ ul_3.appendChild(li);
93
+ input.value = "";
94
+ saveDate();
95
+ }
96
+
97
+ if (todo && todo.completed) {
98
+ li.classList.add("text-decoration-line-through");
99
+ }
100
+
101
+ li.addEventListener("contextmenu", function (event) {
102
+ // 右クリックイベントブロック
103
+ event.preventDefault();
104
+ li.remove();
105
+ saveDate();
106
+ });
107
+
108
+ li.addEventListener("click", function () {
109
+ li.classList.toggle("text-decoration-line-through");
110
+ saveDate();
111
+ });
112
+ }
113
+ }
114
+ // li要素を取得して、配列としてまとめておく
115
+ function saveDate() {
116
+ const lists = document.querySelectorAll("li");
117
+ // 空の配列を定義
118
+ const todos = [];
119
+
120
+ // 配列の全要素に対して反復処理
121
+ lists.forEach((li) => {
122
+ // todosの配列に追加していく処理
123
+ todos.push({
124
+ // 入力された値
125
+ text: li.innerText,
126
+ completed: li.classList.contains("text-decoration-line-through"),
127
+ });
128
+ });
129
+ // jsonでローカルデータ保存
130
+ localStorage.setItem("todos", JSON.stringify(todos));
131
+ }
132
+
133
+ // リセットボタン
134
+ const Reset = document.getElementById("Reset");
135
+
136
+ Reset.addEventListener("click", function () {
137
+ // 子要素全消去
138
+ all_ul.innerHTML = "";
139
+ window.location.reload();
140
+ saveDate();
141
+ });
142
+
143
+ ```
144
+
145
+ ```HTML
146
+ <!DOCTYPE html>
147
+ <html lang="ja">
148
+ <head>
149
+ <meta charset="UTF-8" />
150
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
151
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
152
+
153
+ <!-- CSS -->
154
+ <link
155
+ href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
156
+ rel="stylesheet"
157
+ integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
158
+ crossorigin="anonymous"
159
+ />
160
+
161
+ <title>条件分岐の練習</title>
162
+ </head>
163
+ <body class="bg-light">
164
+ <div class="container w-100">
165
+ <h1 class="text-center text-info my-4">納期管理アプリ</h1>
166
+
167
+ <form id="all_radio">
168
+ <div class="responsibility">
169
+ <div class="form-check">
170
+ <input
171
+ class="form-check-input"
172
+ type="radio"
173
+ name="deadline"
174
+ id="t_t"
175
+ value="0"
176
+ checked
177
+ />
178
+ <label class="form-check-label" for="flexRadioDefault2">
179
+ 通常業務、通常配送
180
+ </label>
181
+ </div>
182
+ <div class="form-check">
183
+ <input
184
+ class="form-check-input"
185
+ type="radio"
186
+ name="deadline"
187
+ id="t_k"
188
+ value="1"
189
+ />
190
+ <label class="form-check-label" for="flexRadioDefault1">
191
+ 通常業務、緊急配送
192
+ </label>
193
+ </div>
194
+ </div>
195
+
196
+ <div class="deadline mt-3">
197
+ <div class="form-check">
198
+ <input
199
+ class="form-check-input"
200
+ type="radio"
201
+ name="deadline"
202
+ id="j_t"
203
+ value="2"
204
+ />
205
+ <label class="form-check-label" for="flexRadioDefault2">
206
+ 重要業務、通常配送
207
+ </label>
208
+ </div>
209
+ <div class="form-check">
210
+ <input
211
+ class="form-check-input"
212
+ type="radio"
213
+ name="deadline"
214
+ id="j_k"
215
+ value="3"
216
+ />
217
+ <label class="form-check-label" for="flexRadioDefault1">
218
+ 重要業務、緊急配送
219
+ </label>
220
+ </div>
221
+ </div>
222
+ </form>
223
+
224
+ <form id="form" class="mt-2 mb-5">
225
+ <input
226
+ id="input"
227
+ class="form-control"
228
+ placeholder="納期、送り先を入力"
229
+ autocomplete="off"
230
+ />
231
+ </form>
232
+
233
+ <div id="all_ul" class="f-container">
234
+ <ul class="list-group text-secondary" id="ul_3">
235
+ 重要、緊急
236
+ </ul>
237
+ <ul class="list-group text-secondary" id="ul_2">
238
+ 重要、通常
239
+ </ul>
240
+ <ul class="list-group text-secondary" id="ul_1">
241
+ 通常、緊急
242
+ </ul>
243
+ <ul class="list-group text-secondary" id="ul_0">
244
+ 通常、通常
245
+ </ul>
246
+ </div>
247
+ </div>
248
+
249
+ <!-- Resetボタン -->
250
+ <div class="d-grid gap-2 col-1 mx-auto pt-5">
251
+ <button id="Reset" class="btn btn-primary" type="button">Reset</button>
252
+ </div>
253
+
254
+ <script src="todo.js"></script>
255
+ </body>
256
+ </html>
257
+
258
+ ```
259
+
260
+ ### 試したこと
261
+
262
+ 追加する<li>タグに.classNameでクラスの追加や、
263
+
264
+ querySelectorで、<ul>タグを保存しようとしましたが、
265
+
266
+ 上手くいきませんでした。
267
+
268
+ ### 補足情報（FW/ツールのバージョンなど）
269
+
272
270
  ここにより詳細な情報を記載してください。
JavaScript
JavaScript

3

文字サイズ変更、リンク追加

2021/12/23 14:51

投稿

oil
oil

スコア11

title CHANGED
File without changes
body CHANGED
@@ -1,7 +1,9 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- #ブラウザをリロードすると、振り分けた<li>タグが１っ箇所にまとまってしまうのを直したい。
3
+ ####ブラウザをリロードすると、振り分けた<li>タグが１っ箇所にまとまってしまうのを直したい。
4
4
 
5
+ #####[完成した物](http://deadline.oilblog.net/)
6
+
5
7
  ### 発生している問題・エラーメッセージ
6
8
 
7
9
 

2

markdown記法を使ってみた

2021/12/23 14:51

投稿

oil
oil

スコア11

title CHANGED
@@ -1,1 +1,1 @@
1
- 条件分岐で、４つの<ul>に、appendChild(li);で<li>タグを追加して、振り分けをした状態のままの保存方法がどうすれば良いのか分かりません。
1
+ ブラウザをリロードすると、条件分岐で振り分けた<li>タグが、1箇所にまとまってしまうのを直したい。
body CHANGED
@@ -1,28 +1,27 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- ブラウザをリロードすると、振り分けた<li>タグが１っ箇所にまとまってしまうのを直したい。
3
+ #ブラウザをリロードすると、振り分けた<li>タグが１っ箇所にまとまってしまうのを直したい。
4
4
 
5
5
  ### 発生している問題・エラーメッセージ
6
6
 
7
- ```
8
- JavaScriptで、
9
7
 
10
- TODOリストにラジオボタンで４つの条件分岐を付けて、
8
+ ####JavaScriptで、
11
9
 
12
- ４つの<ul>に、appendChild(li);で<li>タグを追加して、
10
+ ####TODOリストにラジオボタンで４つの条件分岐を付けて、
13
11
 
14
- 振り分けをした状態のままの保存方法がどうすれば良いのか分かりません。
12
+ ####４つの<ul>に、appendChild(li);で<li>タグを追加して、
15
13
 
16
- 現状は、document.querySelectorAll("li");で、
14
+ ####振り分けをした状態のままの保存方法がどうすれば良いのか分かりません。
17
15
 
18
- <li>タグがまとめて保存されてしまいます。
16
+ ####現状は、document.querySelectorAll("li");で、
19
17
 
20
- querySelectorAll("li");をどう変えれば良いのか教えて下さい。
18
+ ####<li>タグがまとめて保存されてしまいます。
21
19
 
22
- よろしくお願いします。
20
+ ####querySelectorAll("li");をどう変えれば良いのか教えて下さい。
23
21
 
24
- ```
22
+ ####よろしくお願いします。
25
23
 
24
+
26
25
  ### 該当のソースコード
27
26
 
28
27
  ```JavaScript

1

前提・実現したいことの記入漏れを修正

2021/12/23 14:44

投稿

oil
oil

スコア11

title CHANGED
File without changes
body CHANGED
@@ -1,8 +1,6 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- ここに質問の内容を詳しく書いてください。
4
- （例）PHP(CakePHP)で●●なシステムを作っています。
5
- ■■な機能を実装中に以下のエラーメッセージが発生しました。
3
+ ブラウザをリロードすると、振り分けた<li>タグが１っ箇所にまとまってしまうのを直したい。
6
4
 
7
5
  ### 発生している問題・エラーメッセージ
8
6