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

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

ただいまの
回答率

90.01%

【TaskList】取消線ボタンを実現させたい。

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 247

kikuchi1992

score 0

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>

<div class="title">
<a class="TASK" href="todolist.html">
TaskList
</a>
</div>

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

</nav>
</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>

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/08/11 09:09

    >上手くいきません。
    今どうなっていて、結局どうしたいのでしょうか。
    きちんと再現確認するには「style.css」の内容も必要に思いますし、
    「bulma.min.css」はどのような理由でコメントアウトされてるのでしょうか?

    キャンセル

  • kikuchi1992

    2019/08/13 18:17

    コメントありがとうございます。
    至らない点があり申し訳ございません。
    質問内容を編集しましたのでご確認いただければ幸いです。

    キャンセル

回答 1

0

【原因】
以下の取り消し線ボタンのクリックイベントを定義している箇所で指定している「line-through」が関数として定義されていないので取り消し線が表示されません。

// 取り消し線
var buttons = document.getElementsByClassName('strike');
for (var i=0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', line-through);
};

【修正内容】
取り消し線を設定する関数を用意してあげて

function setStrikethrough() {
  var target = this.previousElementSibling;
  target.style.textDecoration="line-through"; // 取り消し線を設定する処理
}

用意した関数をクリックイベントを定義している箇所で指定すれば取消線マークを押下した時に取り消し線が表示されます。

var buttons = document.getElementsByClassName('strike');
for (var i=0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', setStrikethrough);
};

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/08/17 17:39

    ありがとうございます!取消線が実現できました!
    実現できたところで新たな疑問、というかうまくいかないところが・・・
    取消線を複数表示している状況で、他のリストの削除ボタンを押すと、取消線が消えてしまいます。。。
    どうしたら、削除してもその他の取消線をそのままの表示にできますか?

    キャンセル

  • 2019/08/19 23:54

    削除ボタンを押すと取り消し線が消えてしまう原因はlocalStorageにどのタスクが取り消し状態なのかを保存していない為です。

    現状の削除ボタンの動きの流れは以下の通りになっているので、②の処理でlocalStorageの値を描画する際に取り消し線のスタイルも設定してあげる必要があります。
    ① localStorageから対象のタスクを削除
    ② localStorageに保存されているタスクで再描画

    上記で取り消し線のスタイルを設定するにはlocalStorageに保存されている各タスク毎に取り消し状態のフラグを持たせる必要もあります。

    まとめると以下の修正を行えば想定通り動きます。
    ①取り消しボタン押下時、localStorageに取り消し状態のフラグを登録する
    ②get_todos()内でlocalStorageに保存されている取り消し状態のフラグを使って取り消し線のスタイルを設定する

    キャンセル

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

  • ただいまの回答率 90.01%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる