回答編集履歴

1

それなりに動くコードついか

2020/06/24 15:12

投稿

ku__ra__ge
ku__ra__ge

スコア4524

test CHANGED
@@ -33,3 +33,167 @@
33
33
 
34
34
 
35
35
  「試したこと」に`tr.initialize()`というコードがありますが、trという変数は定義されていませんし、htmlの要素はinitializeというメソッドを持っていないので実行するとエラーになります。
36
+
37
+
38
+
39
+ それなりに動くコード:
40
+
41
+ ```javascript
42
+
43
+ {
44
+
45
+ document.addEventListener('DOMContentLoaded', function() {
46
+
47
+ const addTaskTrigger = document.getElementsByClassName('addTask-trigger')[0];
48
+
49
+ const addTaskTarget = document.getElementsByClassName('addTask-target')[0];
50
+
51
+ const addTaskValue = document.getElementsByClassName('addTask-value')[0];
52
+
53
+ let nextId = 0;
54
+
55
+ const todos = [];
56
+
57
+
58
+
59
+ let tableItem;
60
+
61
+ let idSpanTd;
62
+
63
+ let taskSpanTd;
64
+
65
+ let createButtonTd;
66
+
67
+ let removeButtonTd;
68
+
69
+
70
+
71
+ const addTask = (task, id) => {
72
+
73
+ //要素内のHTML文章を変更する
74
+
75
+ idSpanTd.innerText = id;
76
+
77
+ taskSpanTd.innerText = task;
78
+
79
+ //生成したテーブル要素をブラウザに表示する
80
+
81
+ tableItem.append(idSpanTd);
82
+
83
+ tableItem.append(taskSpanTd);
84
+
85
+ addTaskTarget.appendChild(tableItem);
86
+
87
+ return(task,id)
88
+
89
+ };
90
+
91
+
92
+
93
+ let removeButton;
94
+
95
+ let createButton;
96
+
97
+
98
+
99
+ const addButton = (button) => {
100
+
101
+ //要素内のHTML文章を変更する
102
+
103
+ createButton.innerText = '作業中';
104
+
105
+ removeButton.innerText = '削除';
106
+
107
+ //生成したテーブル要素をブラウザに表示する
108
+
109
+ tableItem.append(createButtonTd);
110
+
111
+ tableItem.append(removeButtonTd);
112
+
113
+ addTaskTarget.appendChild(tableItem);
114
+
115
+ //生成したbutton要素を生成する
116
+
117
+ createButtonTd.append(createButton);
118
+
119
+ removeButtonTd.append(removeButton);
120
+
121
+ return(button)
122
+
123
+ };
124
+
125
+
126
+
127
+ //追加ボタンをクリックした際にタスクを追加する処理を行う
128
+
129
+ addTaskTrigger.addEventListener('click', () => {
130
+
131
+ //テーブル要素を生成する td要素を作る
132
+
133
+ //Button要素を生成する
134
+
135
+ tableItem = document.createElement('tr');
136
+
137
+ idSpanTd = document.createElement('td');
138
+
139
+ taskSpanTd = document.createElement('td');
140
+
141
+ createButtonTd = document.createElement('td');
142
+
143
+ removeButtonTd = document.createElement('td');
144
+
145
+ removeButton = document.createElement('button');
146
+
147
+ createButton = document.createElement('button');
148
+
149
+
150
+
151
+ const task = addTaskValue.value;
152
+
153
+ addTask(task, nextId++);
154
+
155
+ addButton();
156
+
157
+ addTaskValue.value = '';
158
+
159
+
160
+
161
+ removeButton.addEventListener('click', delete_element, false);
162
+
163
+
164
+
165
+ });
166
+
167
+
168
+
169
+ //チェックリスト用オブジェクト
170
+
171
+ const todo = {
172
+
173
+ task: 'taskSpanTd',
174
+
175
+ status: '作業中'
176
+
177
+ };
178
+
179
+ todos.push(todo);
180
+
181
+
182
+
183
+ // //削除ボタンを押した時にタスクを削除する
184
+
185
+ function delete_element () {
186
+
187
+ let tabletag = this.closest ('tr');
188
+
189
+ if (tabletag)
190
+
191
+ tabletag.remove ();
192
+
193
+ }
194
+
195
+ });
196
+
197
+ }
198
+
199
+ ```