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;
}