質問編集履歴

1

遅くなりすみません!追記でHTMLのコードとjsのコードを付け足しました。

2019/03/26 03:08

投稿

Singo109
Singo109

スコア15

test CHANGED
File without changes
test CHANGED
@@ -18,7 +18,259 @@
18
18
 
19
19
  ### 該当のソースコード 
20
20
 
21
+
22
+
23
+ ```html
24
+
25
+
26
+
27
+ <!DOCTYPE html>
28
+
29
+ <html lang="ja">
30
+
31
+ <head>
32
+
33
+ <meta charset="utf-8">
34
+
35
+ <title>todoアプリ</title>
36
+
37
+ <link rel="stylesheet" href="css/styles.css">
38
+
39
+ </head>
40
+
41
+ <body>
42
+
43
+ <h1>ToDoリスト</h1>
44
+
45
+ <form name="form1" id="checkedTask">
46
+
47
+ <input type="radio" name="task" id="radio-all" checked>すべて</input>
48
+
49
+ <input type="radio" name="task" id="radio-work" >作業中</input>
50
+
51
+ <input type="radio" name="task" id="radio-done" >完了</input>
52
+
53
+ </form>
54
+
55
+
56
+
57
+ <div class="todolist">
58
+
59
+ <p>ID コメント 状態</p>
60
+
61
+ <ol start="0" id="task-list">
62
+
63
+ <!-- <li>タスク1
64
+
65
+ <button>作業中</button>
66
+
67
+ <button>削除</button>
68
+
69
+ </li> -->
70
+
71
+
72
+
73
+ </ol>
74
+
75
+ </div>
76
+
77
+
78
+
79
+ <div class="newtask">
80
+
81
+ <h1>新規タスク追加</h1>
82
+
83
+ <form id="form">
84
+
85
+ <input type="text" id="new-task" value="">
86
+
87
+ <button class="btn" type="button" id="btn">追加</button>
88
+
89
+ <form>
90
+
91
+ </div>
92
+
93
+
94
+
95
+
96
+
97
+
98
+
99
+ <script src="js/main.js"></script>
100
+
101
+ </body>
102
+
103
+
104
+
105
+ </html>
106
+
107
+ ```
108
+
109
+
110
+
111
+ ```javascript
112
+
113
+
114
+
115
+ (function(){
116
+
117
+ 'use strict'
118
+
119
+ var btn = document.getElementById('btn');
120
+
121
+ var taskList = document.getElementById('task-list'); /*olタグ*/
122
+
123
+ var tasks = [];
124
+
125
+ var radioWork = document.getElementById('radio-work'); /*ラジオボタン作業中のid*/
126
+
127
+ var radioDone = document.getElementById('radio-done'); /*ラジオボタン完了のid*/
128
+
129
+ var radioAll = document.getElementById('radio-all');
130
+
131
+
132
+
133
+
134
+
135
+ /*作業中ボタン作成処理*/
136
+
137
+ var createWorkBtn = function(){
138
+
139
+ var WorkBtn = document.createElement('button');
140
+
141
+ var WorkText = document.createTextNode('作業中');
142
+
143
+ WorkBtn.appendChild(WorkText);
144
+
145
+ // 作業ボタン押下処理
146
+
147
+ WorkBtn.addEventListener('click',function(){
148
+
149
+ if(this.textContent == "作業中"){
150
+
151
+ this.textContent = "完了";
152
+
153
+ // 親要素へclassNameをつける処理
154
+
155
+ var doneParent = this.parentNode;
156
+
157
+ doneParent.className= 'workDone';/*完了class*/
158
+
159
+ }else{
160
+
161
+ this.textContent = "作業中";
162
+
163
+ // ボタン押下で生成されたdomの中の親要素へclassNameをつける処理
164
+
165
+ var workParent = this.parentNode;
166
+
167
+ workParent.className = 'work';/*作業中class*/
168
+
169
+ }
170
+
171
+ })
172
+
173
+ return WorkBtn;
174
+
175
+ }
176
+
177
+
178
+
179
+ // 削除ボタン作成処理
180
+
181
+ var createDelBtn = function(){
182
+
183
+ var delBtn = document.createElement('button');
184
+
185
+ var delText = document.createTextNode('削除');
186
+
187
+ delBtn.appendChild(delText);
188
+
189
+ delBtn.id = 'delId';
190
+
191
+
192
+
193
+ // 削除ボタン押下処理
194
+
195
+ delBtn.addEventListener('click',function(){
196
+
197
+ var li = this.parentNode;
198
+
199
+ var result = confirm('タスクを削除しますか?');
200
+
201
+ if(result){
202
+
203
+ li.remove();
204
+
205
+ alert('削除しました。');
206
+
207
+ return;
208
+
209
+ }else{
210
+
211
+ return;
212
+
213
+ }
214
+
215
+ })
216
+
217
+ return delBtn;
218
+
219
+ }
220
+
221
+
222
+
223
+ /*追加ボタン押下時処理 タスクを追加する*/
224
+
225
+ btn.addEventListener('click',function(){
226
+
227
+ var form = document.getElementById('form');
228
+
229
+ var task = document.getElementById('new-task').value;
230
+
231
+ if(task==""){
232
+
233
+ alert("タスクを入力して下さい");
234
+
235
+ return;
236
+
237
+ }
238
+
239
+ tasks.push(task); /*new-taskの値を配列tasksへpush */
240
+
241
+
242
+
243
+ //liタグ作成処理
244
+
245
+ var li = document.createElement('li');
246
+
247
+ li.className = 'work';
248
+
249
+ taskList.appendChild(li); /*taskList(olタグ)の子要素へ変数liを入れる*/
250
+
251
+
252
+
253
+ for(var i = 0; i < tasks.length; i++ ){ /*i==配列のインデックス*/
254
+
255
+ li.textContent = tasks[i] /*liタグの要素へ配列tasks[i]を代入*/
256
+
257
+ }
258
+
259
+ li.appendChild(createWorkBtn()); /*returnで帰ってきたworkBtn*/
260
+
261
+ li.appendChild(createDelBtn());/*returnで帰ってきたDelBtn*/
262
+
263
+ })
264
+
265
+
266
+
267
+
268
+
269
+ /*ラジオボタン完了を押下時の処理*/
270
+
271
+
272
+
21
- radioDone.addEventListener('click',function(){
273
+ radioDone.addEventListener('click',function(){
22
274
 
23
275
  var workTsks = document.getElementsByClassName('work');
24
276
 
@@ -48,7 +300,13 @@
48
300
 
49
301
 
50
302
 
303
+
304
+
305
+ // ラジオボタン作業中押下時処理
306
+
307
+
308
+
51
- radioWork.addEventListener('click',function(){
309
+ radioWork.addEventListener('click',function(){
52
310
 
53
311
  var doneTsks = document.getElementsByClassName('workDone');
54
312
 
@@ -78,17 +336,7 @@
78
336
 
79
337
 
80
338
 
81
-
82
-
83
-
84
-
85
-
86
-
87
-
88
-
89
- ```JavaScript ここに言語名を入力
90
-
91
- ソースコード 
339
+ })();
92
340
 
93
341
  ```
94
342