ローカルストレージについて

javascript
1コードlet button = document.querySelector('.btn');
2let todo = JSON.parse(localStorage.getItem('key'))
3let done =  JSON.parse(localStorage.getItem('kagi'))
4
5for (var i = 0; i < todo.length; i++) {
6    hoge(todo[i]) 
7    }
8
9button.addEventListener('click',function(){
10    var input = document.querySelector('.input');    
11    if (input.value != '') {
12       hoge(input.value);
13       todo.push(input.value);
14       localStorage.setItem('key',JSON.stringify(todo))     
15       console.log(JSON.stringify(todo))
16       }
17       })
18
19     function hoge(moji){
20                var input = document.querySelector('.input');
21                let stop_list = document.querySelector('.stop-list');
22                let list = document.createElement('li'); 
23                list.classList.add('list');    
24                list.textContent = moji;
25                stop_list.appendChild(list);
26                var icon = document.createElement('div');
27                list.appendChild(icon);
28                var trash = document.createElement('i');
29                trash.classList.add('fas');
30                trash.classList.add('fa-trash');
31                var check = document.createElement('i')
32                check.classList.add('fas')
33                check.classList.add('fa-check');
34                icon.appendChild(trash);
35                icon.appendChild(check);
36                trash.addEventListener('click',function(){
37                let hantei = confirm('Are you sure you want to remove this list?')
38                if (hantei === true) {
39                list.remove();
40                todo.splice(todo.indexOf(this.parentElement.textContent),1)
41                localStorage.setItem('key',JSON.stringify(todo))
42                }
43                })
44
45                check.addEventListener('click',function(){
46                    var done = document.querySelector('.done')
47                    done.appendChild(list)
48                    done.push(input.value)
49                    localStorage.setItem('kagi',JSON.stringify(done))
50                    
51
52                })
53                }                      
54``

html
1コード<!DOCTYPE html>
2<html lang="jp">
3<head>
4<title>TO DO LIST</title>
5<meta charset="utf-8">
6<link rel="stylesheet" type="text/css" href="./css/todo.css">
7<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
8<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@500&display=swap" rel="stylesheet">
9</head>
10
11<body>
12  <header>
13  <h1 class="title">TO DO LIST</h1>
14   <form>
15   	<input class="input" type="text" placeholder="Add your list here" >
16　　 <input type="button" class="btn" value="Add">
17   </form>
18  	  <ul class="stop-list">
19              <!--   <li class="list">Over-apologizing
20                    <div class="delete"><i class="fas fa-check"></i></div>
21                </li>
22                <li class="list">Comparing yourself to others
23                    <div class="delete"><i class="fas fa-check"></i></div>
24                </li>
25                <li class="list">Saying 'Okey' when it's not
26                    <div class="delete"><i class="fas fa-check"></i></div>
27                </li>
28                <li class="list">Making excuses
29                    <div class="delete"><i class="fas fa-check"></i></div>
30                </li>
31                <li class="list">Stop wasting time in your car
32                    <div class="delete"><i class="fas fa-check"></i></div>
33                </li>
34                 <li class="list">Being afraid to fail
35                    <div class="delete"><i class="fas fa-check"></i></div>
36                </li> -->
37            </ul>
38       <div>    
39      <h2 class="title">DONE</h2>
40      <ul class='done'></ul>
41       </div> 
42             <script src='./js/todo.js'></script>
43  </header>
44
45</body>
46</html>
47
48
49
50

todolistを作成していて、doneの箇所にもローカルストレージを適用させたいのですが方法が分からず困っています。
done.pushの箇所にエラーが表示されていて、何をdoneにpushをしればいいのでしょうか？
ご教授いただければ幸いです。

行動規範の内容に同意します

回答1件

check.addEventListener('click')の中では、var done = document.querySelector('.done')としてしまっているので、名前が重なる外側のlet done = JSON.parse(localStorage.getItem('kagi'))へはアクセスできません。

var doneを別名に変えて、両方の変数にアクセスできるようにしましょう。

投稿2020/11/23 08:25