javascriptでフィルター機能を作りたいのだが下記のエラー文が出て先に進めません。

■問題点

Uncaught TypeError: Cannot set property 'display' of undefined
at NodeList.forEach (<anonymous>)
at HTMLSelectElement.filterTodo

js
1const todoList = document.querySelector(".todo-list");
2const filterOption = document.querySelector('.filter-todo');
3
4filterOption.addEventListener('click',filterTodo);
5
6function filterTodo(e){
7  const todos = todoList.childNodes;
8  todos.forEach(function(todo){
9    switch (e.target.value){
10      case "all":
11        todo.style.display = "flex";
12        break;
13      case "completed":
14        if(todo.classList.contains('completed')){
15          todo.style.display = "flex";
16        }else{
17          todo.style.display = "none";
18        }
19    }
20  });
21}

todo.style.display = "flex";
これがエラーみたいなのですが記述はあっていると思うので何が行けないのかわからないです、、

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

回答1件

ベストアンサー

todo.style.display = "flex";

これがエラーみたいなのですが記述はあっていると思うので何が行けないのかわからないです、、

このエラーは頻出です。
どういうパターンで出てきて、どうすれば良いかを判断できないと辛いと思うので、
まずはそこを解説します。

Uncaught TypeError: Cannot set property 'display' of undefined
at NodeList.forEach (<anonymous>)
at HTMLSelectElement.filterTodo

Cannot set property 'display' of undefinedの部分に注目してください。
JSはオブジェクト指向言語なので、
値.プロパティ名という形式でプロパティを所持することが可能です。

しかしプロパティの所持が許されない例外中の例外が２つ存在します。

undefined
null

これらに対してプロパティのアクセスを試みた瞬間にエラーで死にます。
デベロッパーツールにこのようなコードを記述して……と、
同じエラーが出ましたね。

js
1> (undefined).hogehoge
2Uncaught TypeError: Cannot read property 'hogehoge' of undefined
3    at <anonymous>:1:13

更に深堀りしていきます。
今回の質問ではtodo.style.displayという指定をされましたが、
こういう流れになっています。

todo: 何かしらは存在している
todo.style: プロパティが存在しないのでundefined
todo.tyle.display: undefinedからプロパティを参照しようとしたのでエラー

じゃぁこのtodoって何者なのか？という話になります。

質問文のコードからMDNサイトで追っていくとこうなるのかな？
todoList.childNodes.forEach
このcurrentValue.styleが無いよって言ってるわけですね。

MDNサイトのExampleの結果を見るとこんなことが書いてありますね。

[object HTMLParagraphElement], 0, myThisArg
[object Text], 1, myThisArg
[object HTMLSpanElement], 2, myThisArg

あー、forEachで一覧取り出すと
テキストノードも対象になるんですね。

多分todoがテキストノードなので、
当然styleプロパティを所持しておらずエラーになる。

基本的にchildNodesなんかの低レイヤーの機能を使うとテキストノードのゴミが混ざります。
それでは機能実装が辛いと思いますので、
element.querySelectorAllを使ってtodo-listから絞り込み検索を使ってみてはどうでしょうか？

ただし、querySelectorAllは子要素ではなく子孫要素からの絞り込み検索になるので、
クラス名なんかを割り振ってあげて、子要素だけ取れるように調整してみてください。
改善例としてはこんなかんじ。

js
1const todoList = document.querySelector(".todo-list");
2const filterOption = document.querySelector('.filter-todo');
3
4filterOption.addEventListener('click',filterTodo);
5
6function filterTodo(e){
7  const todos = todoList.querySelectorAll(".todo");
8  todos.forEach(function(todo){
9    switch (e.target.value){
10      case "all":
11        todo.style.display = "flex";
12        break;
13      case "completed":
14        if(todo.classList.contains('completed')){
15          todo.style.display = "flex";
16        }else{
17          todo.style.display = "none";
18        }
19    }
20  });
21}