TODOリスト　表示切り替え

ラジオボタンごとにタスクの表示、非表示を切り替えたい

前提　実現したいこと

JavascriptでTODOリストを作成しております。
ラジオボタンを押した際に表示の切り替えを行いたいです。

発生している問題

引数を受け渡す処理が上手くできない
どのように書き足したら、ブラウザに反映されるようになるのでしょうか。

該当のソースコード


<!DOCTYPE html>
<html lang="jp">

<head>
  <meta charset="UTF-8">
  <title>TODO</title>
</head>

<body>


  <h1>ToDoリスト</h1>
  <p>
    <input type="radio" name="list" value="all" id="radioAll" onchange="change()">すべて
    <input type="radio" name="list" value="work" id="radioWork" onchange="change()">作業中
    <input type="radio" name="list" value="done" id="radioStatus" onchange="change()">完了
  </p>

  <table>
    <thead>
      <th>ID</th>
      <th>コメント</th>
      <th>状態</th>
      <th></th>
    </thead>
    <tbody id="todo-body">
    </tbody>
  </table>


  <h2>新規タスクの追加</h2>
  <input id="text" type="text">
  <button id='btn'>追加</button>

  <script src="js/main.js"></script>


</body>

</html>

'usestrict'

{
  const tableBody = document.getElementById('todo-body')
  const text = document.getElementById('text');
  const todos = [];


  document.querySelector('button').addEventListener('click', () => {
    const workBtn = document.createElement('button');
    workBtn.textContent = '作業中'
    const todo = {};
    todo.tableComment = text.value;
    todo.tableStatus = workBtn;


    workBtn.addEventListener('click', () => {
      if (workBtn.textContent === '作業中') {
        workBtn.textContent = '完了'
      } else {
        workBtn.textContent = '作業中'
      };
      return workBtn;
    })


    createRemoveButton = (tableRecord) => {
      const number = tableRecord.rowIndex - 1;
      const removeBtn = document.createElement('button');
      removeBtn.textContent = '削除'

      removeBtn.addEventListener('click', () => {
        todos.splice(number, 1);
        showTodos();
      })

      return removeBtn;
    };

    if (todo) {
      todos.push(todo);
      text.value = '';
      showTodos();
    }
  });

  const showTodos = () => {
    tableBody.textContent = '';
    todos.forEach((todo, number) => {
      const tableRecord = document.createElement('tr');
      tableBody.appendChild(tableRecord);
      const tableId = document.createElement('td');
      const comment = document.createElement('td');
      const status = document.createElement('td');
      const action = document.createElement('td');

      tableId.textContent = number;
      comment.textContent = todo.tableComment;
      const work = todo.tableStatus
      tableRecord.appendChild(tableId);
      tableRecord.appendChild(comment);
      tableRecord.appendChild(status);
      status.appendChild(work);
      tableRecord.appendChild(action);
      action.appendChild(createRemoveButton(tableRecord));
      
      const radioAll = document.getElementById('radioAll');
      const radioWork = document.getElementById('radioWork');
      const radioDone = document.getElementById('radioDone');

    });
  };
  
  
  function change(){
    if (radioAll.checked) {
      return showTodos(todos);
    } else if (radioWork.checked) {
      const todoWork = todos.filter((todo) => {
        return todo.tableStatus === '完了'
      })
      return showTodos(todoWork);
    } else if (radioDone.checked) {
      const todoDone = todos.filter((todo) => {
        return todo.tableStatus === '作業中'
      })
      return showTodos(todoDone);
    }
  }
  
  
}

試したこと

__ const showTodos = () => {}__
ここの中で引数を受け渡す処理をするのかなと思い色々試したのですが、うまくいきませんでした。
よろしくお願いいたします。

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

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

const showTodos = () => {}

ここの中で引数を受け渡す処理をするのかなと思い色々試したのですが、

引数で処理を行うのであれば、このような方法でいけるかと思います。

javascript
1
2showTodos(todos) // 表示したいTODOリストを渡す
3
4const showTodos = (argTodos) => {
5  // ...
6  argTodos.forEach((todo, number) => {
7    // ...
8  })
9}

これで、表示の切り替え自体は行えますが、試してもらうとわかりますが、提示していただいたコードには他にバグが存在しているので、そこはご自分で解決してみて下さい。
※ステータスの管理や、タイポなどが存在しています。

投稿2021/06/14 05:24

yoshihiko555

総合スコア84

yukiman

2021/06/14 18:29

回答ありがとうございます。色々試してみたのですが、エラーが消えません。原因は何なのでしょうか、

yoshihiko555

2021/06/15 01:19

まず、試した内容と、出力されているエラーを提示してください。それがないと、回答しようにも出来ません。先述した通り、既に提示されているコードには複数問題点が存在しているので、一つずつ問題点を解消していくのがいいかと思います。

yukiman

2021/06/15 05:52 編集

yoshihiko555さんにアドバイス頂いたように ``` const showTodos = (argTodos) => { tableBody.textContent = ''; argTodos.forEach((todo, number) => { const tableRecord = document.createElement('tr'); tableBody.appendChild(tableRecord); const tableId = document.createElement('td'); const comment = document.createElement('td'); const status = document.createElement('td'); const action = document.createElement('td'); tableId.textContent = number; comment.textContent = todo.tableComment; const work = todo.tableStatus tableRecord.appendChild(tableId); tableRecord.appendChild(comment); tableRecord.appendChild(status); status.appendChild(work); tableRecord.appendChild(action); action.appendChild(createRemoveButton(tableRecord)); const radioAll = document.getElementById('radioAll'); const radioWork = document.getElementById('radioWork'); const radioDone = document.getElementById('radioDone'); }); }; ``` で書いてタイポを修正し、ラジオボタンを押したところ、”作業中”、”完了”どちらを押しても内容が何も表示されなくなってしまい再度”すべて”を押すと状態を維持したまま、全て表示されます。これは、else ifの内容を渡せていないからでしょうか。

yoshihiko555

2021/06/15 05:53

else ifはどこのことを指しているのでしょうか。また、おそらくコンソールにエラーが出力されているかと思いますので、エラーの内容を提示していただける幸いです。

yukiman

2021/06/15 07:51

chroomの検証でコンソールを確認しているんですが、なにもエラーは出ず逆に行き詰ってしまっている状況です。 if (radioAll.checked) { return showTodos(todos); } else if (radioWork.checked) { const todoWork = todos.filter((todo) => { return todo.tableStatus === '完了' }) return showTodos(todoWork); } else if (radioDone.checked) { const todoDone = todos.filter((todo) => { return todo.tableStatus === '作業中' }) return showTodos(todoDone); } } ここの記述が不適切なんですかんね、初学者の質問に丁寧に向き合っていただきありがとうございます。

yoshihiko555

2021/06/16 01:57 編集

> ラジオボタンを押したところ、”作業中”、”完了”どちらを押しても内容が何も表示されなくなってしまい再度”すべて”を押すと状態を維持したまま、全て表示されます。これに関しては、おそらくステータス管理がうまくいっていないのかな思われます。 else if文で、todo.tableStatusを判定しているかと思いますが、このtodo.tableStatusに入っている値をもう一度確認してみてください。「完了」や「作業中」といった文字列ではなく、buttonのElementが格納されていることが確認できるかと思います。となると、当然この条件式は正常に動作せず、意図した結果にはなりません。確認方法は、デベロッパーツールを使用してデバッグ等をすれば確認可能です。

yukiman

2021/06/16 04:20

ありがとうございます！表示の切り替えできるようになりました。まだ、挙動で直したいところが出てきたので頑張ってみます。丁寧な回答ありがとうございました。

行動規範の内容に同意します