Q&A
早速のご回答ありがとうございます。
仰る通りかと思います。必要な手順を考えてみてはいるのですが、検討はずれなことが多くお恥ずかしい限りです。int32_2さんの回答を見て、なるほどinput[type = checkbox]であったり、checkbox.checked = trueとすれば良かったのだと学ぶことができ有難いです。まずは教えて頂いたコードを実際に試してみたく思います。
実現したいこと
Javascriptの「createElement」で作成したチェックボックスたちを、
あるボタンを押すことで一括で選択できるようにしたい。
前提
ドットインストールの「javascriptでtodo管理アプリを作ろう」を学びました。
その後、作成したリストたちを一括選択をした上で削除ができる機能をつけたいと思いましたが、うまくいきません。どのようにすれば実現可能でしょうか。
該当のソースコード
<HTML>
<h1> <button id="checkAll">checkAll</button> todoリスト <button id="purge">purge</button> </h1> <div class="todo-container"> <ul id="todos"> <!-- jsのtodoリストが入る --> </ul> </div> <div class="form-container"> <form id="add-form" class="footer"> <input type="text" placeholder="ここにtodoを入力する"> <button>Add</button> </form> </div>
<script.js> let todos; if (localStorage.getItem('todos') === null) { todos = []; } else { todos = JSON.parse(localStorage.getItem('todos')); } const saveTodos = () => { localStorage.setItem('todos', JSON.stringify(todos)); }; const renderTodo = (todo) => { const input = document.createElement('input'); input.type = 'checkbox'; input.checked = todo.isCompleted; input.addEventListener('change', () => { todos.forEach((item) => { if (item.id === todo.id) { item.isCompleted = !item.isCompleted; } }); saveTodos(); }); const span = document.createElement('span'); span.textContent = todo.title; const label = document.createElement('label'); label.appendChild(input); label.appendChild(span); const button = document.createElement('button'); button.textContent = 'x'; button.addEventListener('click', () => { if (!confirm('選択したタスクを削除する？')) { return; } li.remove(); todos = todos.filter((item) => { return item.id !== todo.id; }); saveTodos(); }); const li = document.createElement('li'); li.appendChild(label); li.appendChild(button); document.querySelector('#todos').prepend(li); }; const renderTodos = () => { todos.forEach((todo) => { renderTodo(todo); }); }; document.querySelector('#add-form').addEventListener('submit', (e) => { e.preventDefault(); const input = document.querySelector('#add-form input'); const todo = { id: Date.now(), title: input.value, isCompleted: false, }; renderTodo(todo); todos.push(todo); console.table(todos); saveTodos(); input.value = ''; input.focus(); }) ★★★★★★★★★★★★★ここに、一括選択のコードを書きたいです。★★★★★★★★★★★★ document.querySelector('#purge').addEventListener('click', () => { if (!confirm('選択したリストを削除しますか？')) { return; } todos = todos.filter((todo) => { return todo.isCompleted === false; }); saveTodos(); document.querySelectorAll('#todos li').forEach((li) => { li.remove(); }); renderTodos(); }); renderTodos(); }
試したこと
ベースは、最後の方のコードであるpurgeと同じ要領なのかなと思い、以下のあたりで色々と当てはめてみたのですが、見当違いのものを当てはめているようでエラー（下記）ばかりになってしまいました。。
エラー：◯◯ is undefined, ◯◯ is not a function
document.querySelector('#checkAll').addEventListener('click', () => { todos = todos.filter((todo) => { return todo.isCompleted === false; }); saveTodos(); document.querySelectorAll('#todos li').forEach((li) => { ★この辺りで、「todo.isCompleted === true」になるようなコードがあれば良いのかなと・・・ }); renderTodos(); });
知見のある方がいらっしゃいましたら、ご教授いただけますと幸いです。
どうぞよろしくお願いいたします。
回答2件
0
ベストアンサー
idやclassなどをもう少し意識して設定すると簡潔に書けます
参考までに
javascript
1<script> 2window.addEventListener('DOMContentLoaded', ()=>{ 3 const save=()=>localStorage.setItem('todos',todos.innerHTML); 4 todos.innerHTML=localStorage.getItem('todos'); 5 document.addEventListener('click',({target})=>{ 6 if(target.matches('#add')){ 7 event.preventDefault(); 8 const li=tmp_li.content.cloneNode(true).querySelector('li'); 9 li.querySelector('span').textContent=txt.value; 10 todos.appendChild(li); 11 txt.value=''; 12 save(); 13 } 14 if(target.matches('.del') && confirm('選択したタスクを削除する？')){ 15 target.closest('li').remove(); 16 save(); 17 } 18 if(target.matches('#checkAll')){ 19 document.querySelectorAll('.chk').forEach(x=>x.checked=true); 20 } 21 if(target.matches('#purge') && confirm('選択したリストを削除する？')){ 22 document.querySelectorAll('.chk:checked').forEach(x=>x.closest('li').remove()); 23 save(); 24 } 25 }); 26}); 27 28</script> 29<template id="tmp_li"> 30<li><label><input type="checkbox" class="chk"><span class="val"></span></label><button class="del">x</button></li> 31</template> 32<h1> 33 <button id="checkAll">checkAll</button> 34 todoリスト 35 <button id="purge">purge</button> 36</h1> 37<div class="todo-container"> 38 <ul id="todos"> 39 <!-- jsのtodoリストが入る --> 40 </ul> 41</div> 42 43<div class="form-container"> 44 <form id="add-form" class="footer"> 45 <input id="txt" type="text" placeholder="ここにtodoを入力する"> 46 <button id="add" type="submit">Add</button> 47 </form> 48</div>
※localstorageに保存するのを忘れていたので調整
※エンター対応
投稿2023/08/30 00:23
編集2023/08/30 04:27
総合スコア114843
0
js
1document.querySelector('#checkAll').addEventListener('click', () => { 2 document.querySelectorAll('#todos input[type=checkbox]').forEach((checkbox) => { 3 checkbox.checked = true; 4 }); 5});
以下のあたりで色々と当てはめてみた
そういうアプローチはやめたほうがよいでしょう。目的のために必要な手順を考え、それをコードにするのがプログラミングです。
追記:
「すべてのアイテムを完了状態にする」が目的なら、以下のようにするのが簡単です。
js
1document.querySelector('#checkAll').addEventListener('click', () => { 2 todos.forEach(item => { item.isCompeted = true; }); 3 saveTodos(); 4 // すべて描き直す。チェックボックスの状態は isCompleted が反映される 5 document.querySelector('#todos').textContent = ''; 6 renderTodos(); 7});
投稿2023/08/29 22:56
編集2023/08/30 04:56
総合スコア20884
頂いたコードを試してみたところ、全選択はされるのですが、その後purgeボタンを押すと選択がすべて解除されるという挙動となりました。もう少し試してみたく思います。お世話になり、ありがとうございました。
本当にやりたいことは「すべてのチェックボックスをチェックする」ではなく「すべての TODO アイテムを完了状態にする」だったのではありませんか? だとすると、この回答では不十分ですね。
お返事ありがとうございます。
課題の切り分けが不十分で申し訳ありません。
一括選択をして、削除できる挙動をめざしておりましたので、現状、削除のコードまではあるのかと思っておりました為、あとは一括選択をするコードを書けばよいと思っておりました。おっしゃる通り、ただ見た目が選択されたように変わるだけでは不十分で、「一括選択および完了状態（あとはpurgeを押下すれば一括で消せるようになる手前の状態）」になっていることを目指しております。
お返事ありがとうございます。いただいたコードを試したところ、以下のような挙動となりました。
・フォームに入力、Addを押下→ページが再読み込みされ、フォームに書いたものが消える
一つ上のブロックのe.preventDefault();が効いていないのでしょうか。原因を探したいと思います。
お時間いただき申し訳ありませんでした。ご丁寧に対応いただき、ありがとうございました。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2023/08/30 01:52
2023/08/30 01:56 編集
2023/08/30 02:23
2023/08/30 03:25
2023/08/30 04:24
2023/08/30 04:28
2023/08/30 04:53
2023/08/30 05:03 編集
2023/08/30 05:24
2023/08/30 05:34 編集
2023/08/30 05:52