質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.47%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

699閲覧

SessionStorageを用いてTODOリスト作成時、投稿した直後にチェックしても取り消し線が表示されない(更新後には出る) また、更新後に全消ししてもSessionStorageの内容が消えない

aki_

総合スコア18

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2020/06/27 00:36

編集2020/06/27 01:22

##投稿した直後にチェックしても取り消し線が表示されない
JavaScriptを用いて現在Todoリストを作成しております。
うまくいったので、SessionStorageを用いて作成しようと考えました。
SessionStorageで投稿は及び「SessionStorageによる保存」は成功しましたが、
今度は終了を表すチェックボタンをクリックしても、取り消し線が表示されなくなりました。
もちろん「終了タスクをまとめて削除」

##更新後は全消しができるが、SessionStorageの内容が消えず、もう一度更新後に消した内容が復活してしまう
なお、SessionStorageで更新を行った後は、取り消し線が表示されます。
ただし、この場合で「終了タスクをまとめて削除」で全消しを行った場合、
HTML上からは消えますが、「SessionStorage」の情報が消えません。
そのため更新かけると消した内容が復活します。

ソースコード

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Todo List</title> 6 <meta name="description" content=""> 7 8 <meta name="viewport" content="width=device-width,initial-scale=1"> 9 <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet"> 10 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"> 11 <link rel="stylesheet" href="css/style.css"> 12 </head> 13 <body> 14 <div class="container"> 15 <header class="header txt--center"> 16 <h1 class="header__ttl">TodoList</h1> 17 </header> 18 19 <main class="todoContainer"> 20 <form id="todos" class="todos" name="todos"> 21 <!--<ul class="noTodo"> 22 <li id="noTodoItem" class="noTodoItem">NoTodoList</li> 23 </ul>--> 24 <!--リスト(li要素)はjavascriptで入れる--> 25 </form> 26 <div class="fixedTodo"> 27 <form action="" id="add" class="addTask"> 28 <label class="formTtl">タスク:<input type="text" id="inputText" class="formTxt addTask" name="add" placeholder="New Text"></label> 29 </form> 30 31 <button id="allDelBtn" class="allDelBtn">終了タスクをまとめて削除</button> 32 </div> 33 </main> 34 35 </div> 36 <script src="js/script.js"></script> 37</body> 38</html>``` 39```JavaScript 40'use strict' 41{ 42 const addTask = document.getElementById('add'); 43 const todos = document.getElementById('todos'); 44 //これがないとオールデリートできない 45 const allDelBtn = document.getElementById('allDelBtn'); 46 //文字列と出力するために必要 47 const inputText= document.getElementById('inputText'); 48    //タグとして出力させないように、文字をエスケープ 49 function escText (str){ 50 return String(str).replace(/&/g,"&amp;") 51 .replace(/"/g,"&quot;") 52 .replace(/</g,"&lt;") 53 .replace(/>/g,"&gt;") 54 .replace(/>/g,"&gt;") 55 .replace(///g, "&#047;") 56 } 57    // キーをtask名、html部分を値として渡す必要がある 58    function saveSessionStorage (task, html){ 59  if(html){ 60      // キーをtask名、html部分を値としてセット 61 sessionStorage.setItem(task, html); 62 return; 63   } 64 return; 65    } 66    // sessionStorageを消す必要がある時に使う関数 67    const deleteSessionStorage = task => { 68    sessionStorage.removeItem(task); 69 return; 70    } 71 72   //初期化の際、sessionStorageを出力する必要がある 73  (function(){ 74 for(let key in sessionStorage){ 75 const html = sessionStorage.getItem(key); 76 if (html) { 77 todos.innerHTML += sessionStorage.getItem(key); 78 } 79   } 80 //この構文はここにも書く必要がある 81 const taskCheck = document.querySelectorAll("input[type='checkbox']"); 82 for(let i = 0; i < taskCheck.length; i++){ 83    taskCheck[i].addEventListener('click', () => { 84    if(taskCheck[i].checked){ 85    taskCheck[i].parentNode.nextElementSibling.style.textDecoration = 'line-through'; 86 } else { 87    taskCheck[i].parentNode.nextElementSibling.style.textDecoration = 'none'; 88 }); 89 } 90 //なお、allDelBtnを押すことでチェックがついたもののみ全て消すことも可能 91 allDelBtn.addEventListener('click', e =>{ 92    for(let i = 0; i < taskCheck.length; i++){ 93 if(taskCheck[i].checked=== true) 94 deleteSessionStorage(e); 95 taskCheck[i].parentElement.parentElement.remove(e); 96 } 97      } 98 }) 99   })(); 100   //フォームを文字を入力するとタスク作成 101   addTask.addEventListener('submit', e => { 102 // デフォルトのイベントを無効 103 e.preventDefault(); 104 105 const createTodoList = task => { 106 // HTMLテンプレートを生成 107 const html = 108 `<ul class="listGroup__item todos__item"> 109 <li class="todo__checkbox"><input type="checkbox" name="taskcheck" ></li> 110 <li class="todo__task">${escText(inputText.value)}</li> 111 <li class="delete"></li> 112 </ul>`; 113 todos.innerHTML += html; 114 //ここでセーブ 115 saveSessionStorage(task, html); 116 }; 117 118 //チェックをつけると取り消し線が入る 119 //document.querySelectorAllメソッドで一つでもリストとして取得することが可能 120 //for文で回すことで、全ての中からcheckedになったもののみ取り消し線をつけることができる。 121 //外すことも可能 122 const taskCheck = document.querySelectorAll("input[type='checkbox']"); 123 for(let i = 0; i < taskCheck.length; i++){ 124 taskCheck[i].addEventListener('click', () => { 125 if(taskCheck[i].checked){ 126 taskCheck[i].parentNode.nextElementSibling.style.textDecoration = 'line-through'; 127 } else { 128 taskCheck[i].parentNode.nextElementSibling.style.textDecoration = 'none'; 129 } 130 }); 131 } 132 //なお、allDelBtnを押すことでチェックがついたもののみ全て消すことも可能 133 allDelBtn.addEventListener('click', e =>{ 134 for(let i = 0; i < taskCheck.length; i++){ 135 if(taskCheck[i].checked=== true){ 136 deleteSessionStorage(e); 137 taskCheck[i].parentElement.parentElement.remove(e); 138 } 139 } 140 }) 141 142 // タスクに入力した値を空白を除外して格納 143 const task = addTask.add.value.trim(); 144 if(task.length) { 145 // Todo List の HTML を生成 146 createTodoList(task); 147 // タスクに入力した文字をクリア 148 addTask.reset(); 149 } 150 }); 151 152 //一つずつゴミ箱で削除することも可能。deleteがクラスについている場合(つまりゴミ箱)。 153 //親要素もろとも消し去る。JavaScriptで生成されたアイテムのためこのような記述になる 154 todos.addEventListener('click', e => { 155 if (e.target.classList.contains('delete')){ 156 e.target.parentElement.remove(); 157 //ここで削除する。 158 const task = e.target.parentElement.textContent.trim(); 159 deleteSessionStorage(task); 160 } 161 }); 162 163 164}

試したこと

・最初、「addTask.addEventListener(//フォームを文字を入力するとタスク作成)」の方のみ

JavaScript

1 const taskCheck = document.querySelectorAll("input[type='checkbox']"); 2 for(let i = 0; i < taskCheck.length; i++){ 3    taskCheck[i].addEventListener('click', () => { 4    if(taskCheck[i].checked){ 5    taskCheck[i].parentNode.nextElementSibling.style.textDecoration = 'line-through'; 6 } else { 7    taskCheck[i].parentNode.nextElementSibling.style.textDecoration = 'none'; 8 }); 9 } 10

と取り消し線を行う構文を作成しましたが、
それだと上部「(function(){for(let key in sessionStorage){…(//初期化の際、sessionStorageを出力する必要がある)」
の方が効かないことが気が付きました。それで「初期化した際sessioonStorageを出力する方」にも「const taskCheck=…」にも入れたのです。
でも今度は、タスクを作成する方が効かなくなったのです。

・「チェックを入れているもののみ全部消す」
繰り返しを行うことでチェックしたもののみ削除をを感知し、消すことができると思い、

JavaScript

1for(let i = 0; i < taskCheck.length; i++){ 2if(taskCheck[i].checked=== true){ 3 deleteSessionStorage(e); 4 taskCheck[i].parentElement.parentElement.remove(e); 5 } 6 } 7})

にて試みたのですが、うまくいきません。
なお、taskCheck[i].deleteSessionStorage(e);にしてもうまくいきませんでした。

補足情報(FW/ツールのバージョンなど)

TodoのURL:http://nakatakira.html.xdomain.jp/test/test6/

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/06/27 00:54

HTMLも質問本文にご提示ください。 コピペのみで現象再現できる情報です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問