Q&A
＞上手くいきません。
今どうなっていて、結局どうしたいのでしょうか。
きちんと再現確認するには「style.css」の内容も必要に思いますし、
「bulma.min.css」はどのような理由でコメントアウトされてるのでしょうか？
TaskListを作成しております。
inputの入力フォームにタスクを入力すると、そのすぐ直下にタスクが表示され、
タスクの横にゴミ箱マークと取消線マークが表示されます。
ゴミ箱マークをクリックすると削除され、取消線マークをクリックするとタスクに取消線が入るようにしたいです。
今現在は、ゴミ箱マークをクリックすると削除はされますが、取消線マークをクリックしても取消線が表示されません。。
初学者のため至らない点があるかと思いますが、ご教授ください。
todolist.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>TASKLIST</title> <link rel="stylesheet" href="style.css"> <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script> </head> <body><section class="section"> <div class="container"> <div class="field"> <p class="controlExpanded"> <input id="task" class="input" type="text" placeholder="タスクリストを追加しよう！"> </p> <p class="control"> <a id="add" class="button">追加</a> </p> </div> <nav class="panel"> <div id="todos"></div><div class="title"> <a class="TASK" href="todolist.html"> TaskList </a> </div>
</section> <script> function get_todos() { var todos = new Array; var todos_str = localStorage.getItem('todo'); if (todos_str !== null) { todos = JSON.parse(todos_str); } return todos; } function add() { var task = document.getElementById('task').value; var todos = get_todos(); todos.push(task); localStorage.setItem('todo', JSON.stringify(todos)); show(); return false; } function remove() { var id = this.getAttribute('id'); var todos = get_todos(); todos.splice(id, 1); localStorage.setItem('todo', JSON.stringify(todos)); show(); return false; } function strike() { var id = this.getAttribute('id'); var todos = get_todos(); document.write(str.strike()); } function show() { var todos = get_todos(); var html = ''; for(var i=0; i<todos.length; i++) { html += '<a class="panel-block"><span class="panel-icon remove" id="' + i + '"><br>' + todos[i] + '\t \t<i class="fas fa-trash-alt" aria-hidden="true"></i>' + '</span>' + '<span class="panel-icon strike">' + '\t<i class="fas fa-strikethrough" aria-hidden="true"></i>' + '</span></a>'; }; html += ''; document.getElementById('todos').innerHTML = html; document.getElementById('task').value =""; //削除ボタン var buttons = document.getElementsByClassName('remove'); for (var i=0; i < buttons.length; i++) { buttons[i].addEventListener('click', remove); }; // 取り消し線 var buttons = document.getElementsByClassName('strike'); for (var i=0; i < buttons.length; i++) { buttons[i].addEventListener('click', line-through); }; } document.getElementById('add').addEventListener('click', add); show(); </script> </body> </html></nav> </div>
style.css
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
body{
background-image: url(bg-flower.jpg);
background-repeat: no-repeat;
width:100%;
}
.container {
margin: 0 auto;
max-width: 400px;
}
.title{
margin:0 auto;
text-align: center;
}
.TASK{
text-decoration: none;
font-family: 'Raleway', sans-serif;
color:#555555;
font-size:30px;
}
.field{
display: flex;
margin:0 auto;
text-align: center;
justify-content: center;
padding-top: 180px;
}
.controlExpanded{
margin-right:20px;
}
.button{
border:solid 0.5px #555555;
border-radius: 5px;
padding: 3px;
}
.panel{
color:#555555;
}
.input{
width: 150px;
}
回答1件
0
【原因】
以下の取り消し線ボタンのクリックイベントを定義している箇所で指定している「line-through」が関数として定義されていないので取り消し線が表示されません。
javascript
1// 取り消し線 2var buttons = document.getElementsByClassName('strike'); 3for (var i=0; i < buttons.length; i++) { 4 buttons[i].addEventListener('click', line-through); 5};
【修正内容】
取り消し線を設定する関数を用意してあげて
javascript
1function setStrikethrough() { 2 var target = this.previousElementSibling; 3 target.style.textDecoration="line-through"; // 取り消し線を設定する処理 4}
用意した関数をクリックイベントを定義している箇所で指定すれば取消線マークを押下した時に取り消し線が表示されます。
javascript
1var buttons = document.getElementsByClassName('strike'); 2for (var i=0; i < buttons.length; i++) { 3 buttons[i].addEventListener('click', setStrikethrough); 4};
投稿2019/08/13 13:36
総合スコア72
ありがとうございます！取消線が実現できました！
実現できたところで新たな疑問、というかうまくいかないところが・・・
取消線を複数表示している状況で、他のリストの削除ボタンを押すと、取消線が消えてしまいます。。。
どうしたら、削除してもその他の取消線をそのままの表示にできますか？
削除ボタンを押すと取り消し線が消えてしまう原因はlocalStorageにどのタスクが取り消し状態なのかを保存していない為です。
現状の削除ボタンの動きの流れは以下の通りになっているので、②の処理でlocalStorageの値を描画する際に取り消し線のスタイルも設定してあげる必要があります。
① localStorageから対象のタスクを削除
② localStorageに保存されているタスクで再描画
上記で取り消し線のスタイルを設定するにはlocalStorageに保存されている各タスク毎に取り消し状態のフラグを持たせる必要もあります。
まとめると以下の修正を行えば想定通り動きます。
①取り消しボタン押下時、localStorageに取り消し状態のフラグを登録する
②get_todos()内でlocalStorageに保存されている取り消し状態のフラグを使って取り消し線のスタイルを設定する
あなたの回答
tips
プレビュー
