質問編集履歴
1
コードを二重で掲載してしまったため修正。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,91 +1,3 @@
|
|
|
1
|
-
var TaskRegister = { /*全体まとめ*/
|
|
2
|
-
init: function init() {
|
|
3
|
-
var input = document.getElementById('task');
|
|
4
|
-
var selector = document.getElementById('priority');
|
|
5
|
-
var btn = document.getElementById('registration');
|
|
6
|
-
|
|
7
|
-
btn.addEventListener('click', function (select){
|
|
8
|
-
var color = Priority.getColor(selector.value);
|
|
9
|
-
var task = Task.create(input.value, color);
|
|
10
|
-
List.addTask(task);
|
|
11
|
-
});
|
|
12
|
-
}
|
|
13
|
-
};
|
|
14
|
-
|
|
15
|
-
var Task = { /*登録ボタン関連*/
|
|
16
|
-
create: function create(text, color) {
|
|
17
|
-
var item = document.createElement('li');
|
|
18
|
-
var btn = Button.create(item);
|
|
19
|
-
var select = SelectClone.clone();
|
|
20
|
-
|
|
21
|
-
item.innerHTML = text;
|
|
22
|
-
item.appendChild(select);
|
|
23
|
-
item.style.color = color;
|
|
24
|
-
item.appendChild(btn);
|
|
25
|
-
return item;
|
|
26
|
-
}
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
var Button = { /*完了ボタン関連*/
|
|
30
|
-
create: function create(task, select, item) {
|
|
31
|
-
var btn = document.createElement('button');
|
|
32
|
-
btn.innerHTML = '完了';
|
|
33
|
-
|
|
34
|
-
btn.addEventListener('click', function (select) {
|
|
35
|
-
List.removeTask(task);
|
|
36
|
-
List.addDone(task);
|
|
37
|
-
task.removeChild(btn);
|
|
38
|
-
item.removeChild(select);
|
|
39
|
-
});
|
|
40
|
-
return btn;
|
|
41
|
-
}
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
var SelectClone = { /*クローン関連*/
|
|
45
|
-
clone: function clone (item) {
|
|
46
|
-
var priority = document.getElementById("priority");
|
|
47
|
-
var selectClone = priority.cloneNode(true);
|
|
48
|
-
|
|
49
|
-
for (var i = 0; i < selectClone.children.length; i++) {
|
|
50
|
-
if (priority.value === selectClone.children[i].value) {
|
|
51
|
-
selectClone.children[i].selected = true;
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
selectClone.addEventListener("change", function (event, item) {
|
|
56
|
-
item.style.color = Priority.getColor(event.target.value);
|
|
57
|
-
});
|
|
58
|
-
return selectClone;
|
|
59
|
-
}
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
var List = { /*リスト関連*/
|
|
63
|
-
addTask: function add(task) {
|
|
64
|
-
document.getElementById('taskList').appendChild(task);
|
|
65
|
-
},
|
|
66
|
-
|
|
67
|
-
removeTask: function remove(task) {
|
|
68
|
-
document.getElementById('taskList').removeChild(task);
|
|
69
|
-
},
|
|
70
|
-
|
|
71
|
-
addDone: function add(task) {
|
|
72
|
-
document.getElementById('doneList').appendChild(task);
|
|
73
|
-
}
|
|
74
|
-
};
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
var Priority = { /*優先度の色*/
|
|
78
|
-
getColor: function getColor(value) {
|
|
79
|
-
switch ( Number(value) ) {
|
|
80
|
-
case 1: return '#f62';
|
|
81
|
-
case 2: return '#fc0';
|
|
82
|
-
case 3: return '#0af';
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
};
|
|
86
|
-
|
|
87
|
-
window.addEventListener('load', TaskRegister.init);
|
|
88
|
-
|
|
89
1
|
###前提・実現したいこと
|
|
90
2
|
簡単なタスクリストを作っています。
|
|
91
3
|
|