回答編集履歴
1
コメントを追加しました
answer
CHANGED
|
@@ -17,22 +17,29 @@
|
|
|
17
17
|
```
|
|
18
18
|
追加する関数(add_todo)の例
|
|
19
19
|
```javascript
|
|
20
|
-
// 追加するTODOの番
|
|
20
|
+
// 追加するTODOの連番
|
|
21
21
|
var todo_no = 0;
|
|
22
22
|
// TODOのidの接頭語
|
|
23
23
|
var todo_prefix = 'todo';
|
|
24
24
|
|
|
25
25
|
function add_todo() {
|
|
26
26
|
var d = document;
|
|
27
|
-
var todo_elm;
|
|
27
|
+
var todo_elm; // 追加するTODOのエレメントを入れる変数
|
|
28
|
-
var input_elm = d.getElementById('txt_todo');
|
|
28
|
+
var input_elm = d.getElementById('txt_todo'); // TODOを追加するinputタグを取得
|
|
29
|
-
var txt_todo = input_elm.value;
|
|
29
|
+
var txt_todo = input_elm.value; // inputに入力されている文字
|
|
30
|
+
// もし 入力されている文字が空でなければ
|
|
30
31
|
if(txt_todo !== "") {
|
|
32
|
+
// TODOの連番を+1する
|
|
31
33
|
todo_no += 1;
|
|
34
|
+
// 追加するTODOになる div 要素を作成 -> <div></div>
|
|
32
|
-
todo_elm = d.createElement('
|
|
35
|
+
todo_elm = d.createElement('div');
|
|
36
|
+
// 追加するTODOになる div 要素に todo1 の様な idをつける -> <div id="todo1"></div>
|
|
33
37
|
todo_elm.id = todo_prefix + todo_no;
|
|
38
|
+
// 追加するTODOになる div の中に inputで入力された文字列と 削除ボタンになるinput[type="button"]タグを追加
|
|
34
39
|
todo_elm.innerHTML = txt_todo + ' <input type="button" value="del" onclick="del_todo(\'' + todo_elm.id + '\');">';
|
|
40
|
+
// 確認用のlogを出力 ※ 機能的には不要
|
|
35
41
|
console.log('+ create TODO', todo_elm);
|
|
42
|
+
// <div id="view_todo"></div> に作成した TODOのdivを追加
|
|
36
43
|
d.getElementById('view_todo').appendChild( todo_elm );
|
|
37
44
|
save();
|
|
38
45
|
// TODOを追加したらinputタグをクリアしてあげると使いやすくなりそうです
|
|
@@ -48,8 +55,11 @@
|
|
|
48
55
|
削除する関数(del_toto)の例
|
|
49
56
|
```javascript
|
|
50
57
|
function del_todo(todo_id) {
|
|
58
|
+
// 確認用のタダのlog ※ 機能的には不要
|
|
51
59
|
console.log('>>> delete TODO ID is', todo_id);
|
|
60
|
+
// 引数のTODO IDから対象のTODOを取得 todo_id が 'todo1'なら <div id="todo1">を取得
|
|
52
|
-
var del_elm = document.getElementById(todo_id);
|
|
61
|
+
var del_elm = document.getElementById(todo_id);
|
|
62
|
+
// <div id="view_todo">の中から del_elm で取得した div を削除
|
|
53
63
|
document.getElementById('view_todo').removeChild(del_elm);
|
|
54
64
|
// 消した後も保存してあげないとリロード時に消す前の状態になってしまう
|
|
55
65
|
save();
|