回答編集履歴
2
調整
test
CHANGED
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
todos.innerHTML=localStorage.getItem('todos');
|
|
8
8
|
document.addEventListener('click',({target})=>{
|
|
9
9
|
if(target.matches('#add')){
|
|
10
|
+
event.preventDefault();
|
|
10
11
|
const li=tmp_li.content.cloneNode(true).querySelector('li');
|
|
11
12
|
li.querySelector('span').textContent=txt.value;
|
|
12
13
|
todos.appendChild(li);
|
|
@@ -45,8 +46,9 @@
|
|
|
45
46
|
<div class="form-container">
|
|
46
47
|
<form id="add-form" class="footer">
|
|
47
48
|
<input id="txt" type="text" placeholder="ここにtodoを入力する">
|
|
48
|
-
<button id="add" type="b
|
|
49
|
+
<button id="add" type="submit">Add</button>
|
|
49
50
|
</form>
|
|
50
51
|
</div>
|
|
51
52
|
```
|
|
52
53
|
※localstorageに保存するのを忘れていたので調整
|
|
54
|
+
※エンター対応
|
1
調整
test
CHANGED
|
@@ -2,23 +2,31 @@
|
|
|
2
2
|
参考までに
|
|
3
3
|
```javascript
|
|
4
4
|
<script>
|
|
5
|
+
window.addEventListener('DOMContentLoaded', ()=>{
|
|
6
|
+
const save=()=>localStorage.setItem('todos',todos.innerHTML);
|
|
7
|
+
todos.innerHTML=localStorage.getItem('todos');
|
|
5
|
-
document.addEventListener('click',({target})=>{
|
|
8
|
+
document.addEventListener('click',({target})=>{
|
|
6
|
-
if(target.matches('#add')){
|
|
9
|
+
if(target.matches('#add')){
|
|
7
|
-
const li=tmp_li.content.cloneNode(true).querySelector('li');
|
|
10
|
+
const li=tmp_li.content.cloneNode(true).querySelector('li');
|
|
8
|
-
li.querySelector('span').textContent=txt.value;
|
|
11
|
+
li.querySelector('span').textContent=txt.value;
|
|
9
|
-
todos.appendChild(li);
|
|
12
|
+
todos.appendChild(li);
|
|
10
|
-
txt.value='';
|
|
13
|
+
txt.value='';
|
|
14
|
+
save();
|
|
11
|
-
}
|
|
15
|
+
}
|
|
12
|
-
if(target.matches('.del') && confirm('選択したタスクを削除する？')){
|
|
16
|
+
if(target.matches('.del') && confirm('選択したタスクを削除する？')){
|
|
13
|
-
target.closest('li').remove();
|
|
17
|
+
target.closest('li').remove();
|
|
18
|
+
save();
|
|
14
|
-
}
|
|
19
|
+
}
|
|
15
|
-
if(target.matches('#checkAll')){
|
|
20
|
+
if(target.matches('#checkAll')){
|
|
16
|
-
document.querySelectorAll('.chk').forEach(x=>x.checked=true);
|
|
21
|
+
document.querySelectorAll('.chk').forEach(x=>x.checked=true);
|
|
17
|
-
}
|
|
22
|
+
}
|
|
18
|
-
if(target.matches('#purge') && confirm('選択したリストを削除する？')){
|
|
23
|
+
if(target.matches('#purge') && confirm('選択したリストを削除する？')){
|
|
19
|
-
document.querySelectorAll('.chk:checked').forEach(x=>x.closest('li').remove());
|
|
24
|
+
document.querySelectorAll('.chk:checked').forEach(x=>x.closest('li').remove());
|
|
25
|
+
save();
|
|
20
|
-
}
|
|
26
|
+
}
|
|
27
|
+
});
|
|
21
28
|
});
|
|
29
|
+
|
|
22
30
|
</script>
|
|
23
31
|
<template id="tmp_li">
|
|
24
32
|
<li><label><input type="checkbox" class="chk"><span class="val"></span></label><button class="del">x</button></li>
|
|
@@ -41,3 +49,4 @@
|
|
|
41
49
|
</form>
|
|
42
50
|
</div>
|
|
43
51
|
```
|
|
52
|
+
※localstorageに保存するのを忘れていたので調整
|