JavaScriptでTodoリストの追加したタスクの表示・非表示を切り替えたい。【２回目】

Question

解決済

6

回答数

JavaScriptでTodoリストの追加したタスクの表示・非表示を切り替えたい。【２回目】

2021/08/12 16:21更新

初心者 javascript

JavaScriptでTodoリストを作成しています。

todoリストのタスクをラジオボタンの全て、作業中、完了で表示・非表示を分けたいです。昨日、yusukeMさんに教えて頂いたソースコードや他の参考サイト(https://kensa-nitizyo.com/348/)　で、実際にソースコードを書いたり検証ツールで確認して試したのですが、自身の書いたソースコードからは、 indx.html:14 Uncaught ReferenceError: radioChange is not defined at HTMLInputElement.onchange (indx.html:14) onchange @ indx.html:14 indx.html:15 Uncaught ReferenceError: radioChange is not defined at HTMLInputElement.onchange (indx.html:15)

のエラーがなかなか解消できません。色々調べて実装したのですが、これ以上積んでわからない状態です。何方かアドバイスをお願いします。

期待する動作 ① タスクの状態によって表示/非表示を切り替えできる ② 選択されたラジオボタンに応じて、タスクの表示を切り替える

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>課題③</title>
</head>
<body>
    <h1>TODOリスト</h1>

    <form class="radio">
        <input type="radio" name="list" checked="checked" id="radio-all-select" onchange="radioChange()" value="all">全て
        <input type="radio" name="list" id="radio-working-select" onchange="radioChange()" value="working">作業中
        <input type="radio" name="list" id="radio-done-select" onchange="radioChange()" value="done">完了
    </form>
    
    <!-- <p class="radio">
      <input type="radio" id="r1" name="list" value="1" checked><label for="r1">全て</label>
      <input type="radio" id="r2" name="list" value="2"><label for="r2">作業中</label>
      <input type="radio" id="r3" name="list" value="3"><label for="r3">完了</label>
    </p> -->

<table>
  <thead>
    <tr>

      <th>ID</th>
      <th>コメント</th>
      <th>状態</th>
    </tr>
  </thead>
    <tr>
      <td></td>
      <!-- <td>0</td>
      <td>test</td>
      <td><button>作業中</button></td>
      <td><button>完了中</button></td>
      <td><button>削除</button></td> -->
    </tr>
    <tbody id="list"></tbody>
</table>
  
    
    <h2>新規タスクの追加</h2>
    <input type="text" id="newtask"/>
    <button id="add">追加</button>

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

main.js

"use strict";
{
  //inputタグを取得して変数に入れる
  const newtask = document.getElementById("newtask");
  // 入力された値をリストに追加する
  const add = document.getElementById("add");
  //削除ボタンを押したときに何かの処理を実行したい
  const deleteTask = (btn) => {
    const task = btn.closest("tr");
    const tbody = task.closest("tbody");
    //remove関数を呼び出してタスク(テーブルの一行の要素)を削除します
    task.remove();
    tbody.querySelectorAll("tr").forEach((x, y) => {
      x.setAttribute("id", `id-${y + 1}`);
      x.querySelector("td").textContent = y + 1;
    });
    id--;
  };
  //idの変数を用意
  let id = 0;

  add.addEventListener("click", () => {
    if (newtask.value == "") {
      return;
    }
    id += 1;
    const list = document.getElementById("list");
    const tr = document.createElement("tr");

    const taskId = `task-${id}`;
    tr.id = taskId;
    const comment = newtask.value;

    // 分かりやすい変数名をつけます
    const workButton = document.createElement("button");
    workButton.innerHTML = "作業中"; //完了の状態でボタンをクリックすると作業中へ変更される
    //作業中の状態でボタンをクリックすると完了へ変更される
    workButton.addEventListener("click", () => {
      if (workButton.innerHTML === "作業中") {
        workButton.innerHTML = "完了";
      } else {
        workButton.innerHTML = "作業中";
      }
    });

    const deleteButton = document.createElement("button");
    deleteButton.innerHTML = "削除";

    deleteButton.addEventListener("click", () => deleteTask(deleteButton));
    // テーブルの行に必要なデータの配列を作成します
    const cloumns = [id, comment, workButton, deleteButton];

    // 配列の中身を一つずつ取り出して処理をします
    cloumns.forEach((cloumn) => {
      // テーブルの列を作成します
      const td = document.createElement("td");

      // HTMLタグ処理を変更
      if (cloumn instanceof HTMLElement) {
        td.appendChild(cloumn);
      } else {
        td.innerText = cloumn;
      }
      //行に列を追加します
      tr.appendChild(td);
    });
    //テーブルに行を追加
    list.appendChild(tr);
    newtask.value = "";
  });
  // チェックボックスの表示の切替
  function radioChange() {
    const radio1_1 = document.getElementById("radio-all-select");
    const radio1_2 = document.getElementById("radio-working-select");
    const radio1_3 = document.getElementById("radio-done-select");

    if (radio1_1.checked) {
      tasks.slice();
      return newTasks(tasks);
    } else if (radio1_2.checked) {
      const filterworking = tasks.filter((task) => {
        return newtask.status === "作業中";
      });
      return newTasks(filterworking);
    } else if (radio1_3.checked) {
      const filterdone = tasks.filter((task) => {
        return newtask.status === "完了";
      });
      return newTasks(filterdone);
    }
  }

  // チェックボックスの表示の切替
  // const option = document.getElementsByName("p");

  // const checkTasks = () => {
  //   const workingTasks = document.querySelectorAll(".work");
  //   const doneTasks = document.querySelectorAll(".finish");

  //   if (option[1].checked) {
  //     workingTasks.forEach((element) => {
  //       newtask.style.display = "";
  //     });
  //     doneTasks.forEach((element) => {
  //       newtask.style.display = "none";
  //     });
  //   } else if (option[2].checked) {
  //     doneTasks.forEach((element) => {
  //       newtask.style.display = "none";
  //     });
  //     doneTasks.forEach((element) => {
  //       newtask.style.display = "";
  //     });
  //   } else {
  //       progressTasks.forEach((element) => {
  //         element.style.display = "";
  //       });
  //       doneTasks.forEach((element) => {
  //         element.style.display = "";
  //       });
  //     }
  //   };
  // }
}
//   // チェックボックスの表示の切替

//   function buttonClick() {
//     const all = document.getElementById("r1");
//     const working = document.getElementById("r2");
//     const done = document.getElementById("r3");

//     // 作業中
//     working.addEventListener("click", () => {
//       if (newtask.innerHTML !== "作業中") {
//         newtask.classList.add("none");
//       } else {
//         newtask.classList.remove("none");
//       }
//     });
//     // 完了
//     done.addEventListener("click", () => {
//       if (newtask.innerHTML !== "完了") {
//         newtask.classList.add("none");
//       } else {
//         newtask.classList.remove("none");
//       }
//     });
//     // 全て
//     all.addEventListener("click", () => {
//       newtask.classList.remove("none");
//     });
//     document.getElementById("newtask").value = "";
//   }
//  }

確認したいことがあったら質問者に確認してヤァ！

回答

退会ユーザー

2021/08/12

返信

geno

2021/08/13

返信

退会ユーザー

2021/08/13

返信

geno

2021/08/13

返信

退会ユーザー

2021/08/14

返信

yusukeM

2021/08/14

返信

geno

未経験からフロントエンジニアへの転職を目指し、プログラミングを勉強中。 2023年より受託開発企業にて働く。

Answer 1

indx.html:14 Uncaught ReferenceError: radioChange is not defined
    at HTMLInputElement.onchange (indx.html:14)
onchange @ indx.html:14
indx.html:15 Uncaught ReferenceError: radioChange is not defined
    at HTMLInputElement.onchange (indx.html:15)

このエラーは、メッセージ内容の通りで、

    <form class="radio">
        <input type="radio" name="list" checked="checked" id="radio-all-select" onchange="radioChange()" value="all">全て
        <input type="radio" name="list" id="radio-working-select" onchange="radioChange()" value="working">作業中
        <input type="radio" name="list" id="radio-done-select" onchange="radioChange()" value="done">完了
    </form>

ラジオボタンのonchangeイベントに設定している radioChangeというファンクションが定義されていないというエラーです。

  function radioChange() {
　　///
  }

main.jsに定義しているのに、なぜという事になります。

ここで、関数を定義している場所（スコープ）を考えてみましょう。 radioChangeの定義している場所は、

"use strict";
{
  // この中
    function radioChange() {
　　///
  }
}

このように定義してみてください。 radioChangeを実行できると思います。

"use strict";
  function radioChange() {
　　///
  }

Answer 2

原子さん、アドバイスありがとうございます。上記のアドバイスで、"use strict"; function radioChange() { 　　/// } の形に書き換えたのですが、 Taskが追加できないのと、 main.js:152 Uncaught ReferenceError: tasks is not defined at radioChange (main.js:82) at HTMLInputElement.onchange (indx.html:14) radioChange @ main.js:82 onchange @ indx.html:14 main.js:157 Uncaught ReferenceError: tasks is not defined at radioChange (main.js:87) at HTMLInputElement.onchange (indx.html:15) というエラー表示に変わりました。

色々調べて実装したのですが、これ以上積んでわからない状態です。アドバイスをお願いします。

Answer 3

tasks is not defined

これも同じエラーで、 tasksが定義されていないというエラーですね。

配列か何か定義したかったのでしょうか？ let tasksなど変数を作成して、想定している値（オブジェクト）を代入しておきましょう。

Answer 4

原子さん、アドバイスありがとうございます。『const tasks = document.getElementsByName("list");』を入力したら main.js:155 Uncaught TypeError: tasks.filter is not a function at radioChange (main.js:155) at HTMLInputElement.onchange (indx.html:14) radioChange @ main.js:155 onchange @ indx.html:14 main.js:160 Uncaught TypeError: tasks.filter is not a function at radioChange (main.js:160) at HTMLInputElement.onchange (indx.html:15) というエラーに変わりました。この場合も、tasks.filterで定義したら良いですか？

Answer 5

filterというメソッド（操作）は、配列（Array）の場合に使用できます。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

document.getElementsByName("list"); で取得できるオブジェクトは、NodeListという型のオブジェクトです。 https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByName https://developer.mozilla.org/ja/docs/Web/API/NodeList

参考にされているサイト( https://kensa-nitizyo.com/348/ )でも配列（Array）になっていると思います。確認してみてください。

参考にされているサイトの抜粋

const todos = [];
〜〜〜略〜〜〜
    } else if (radio1_2.checked) {
      const filterdoing = todos.filter((todo) => {
        return todo.status === '作業中';
      });
〜〜〜略〜〜〜

JavaScriptの場合、分かりにくいところがあるのですが、 constやlet、varで定義した定数や変数に格納される値には、型という概念があります。これは、どんな言語でも同じです。

JavaScriptの場合は、例えば、 ”あいうえお”　文字（String） 123　　　　　数値（Number） true/false　　真偽値（Boolean） [] 配列（Array） {} オブジェクト（Object） function 関数(Function) などが存在します。また、データがないことを示すnullや未定義であることを示すundefinedもあります。

これらを意識することで、その値に対して、どのような操作ができるのか分かるようになります。

まずは、型というものを理解してみましょう。プログラムの理解度がぐっと上がると思います。

Answer 6

genoさんのコードは少し複雑なコードになっているためリファクタリングもかねて最初から作り直してみたらどうでしょうか？リファクタリングのコツは処理をセクションごとに分けることですセクションごとに分けることでコードの関係性が明確になり混乱せずに済みます重複してる箇所は関数化するとコードがスッキリしますやり直しは時間はかかるかもしれませんが一度真っ白な状態にもどすとうまくいったりすることもよくあります　自分もよくやりますリファクタリングは重要な作業ですので一度やってみてはどうでしょうか？型についてですがプログラムでは必須の概念ですのでやりながらでも覚えていきましょう！