JavaScriptでforEach文が機能しない

前提・実現したいこと

JavaSciriptのsetAttributeとremoveAttributeを用いて、
ある要素をクリックする度に、他の要素を出現したり、消えたりさせたい。
（１−１をクリックすれば、１−１のメンバーのみが表示されるようにしたい。現在、どこをクリックしても全てのクラスのメンバーが出現する。）

発生している問題・エラーメッセージ

エラーメッセージ
Uncaught TypeError: members[i].removeAtrribute is not a function at HTMLSpanElement.<anonymous> (new:97)

該当のソースコード

JavaScript
1...省略
2
3          <div class="grade-class">
4              <span class="class-num1">１−１</span>
5              <div class="members">
6                <%= f.collection_check_boxes :user_ids, User.where(grade:1, class_number:1).all.order("student_number ASC"), :id, :name %>
7              </div>
8
9              <span class="class-num1">１−２</span>
10               <div class="members">
11                <%= f.collection_check_boxes :user_ids, User.where(grade:1, class_number:2).all.order("student_number ASC"), :id, :name %>
12              </div>
13
14...省略
15
16<script>
17        const c1 = document.querySelectorAll('.class-num1');
18        const members = document.querySelectorAll('.members');
19       
20       c1.forEach(function(list) {
21         list.addEventListener('click', function(){
22           const members = document.querySelectorAll('.members');
23           for(const member of members) {) {
24           if (member.getAttribute('style') == 'display:block;') {
25             member.removeAttribute('style','display:block;')
26          } else {
27             member.setAttribute('style','display:block;')
28          }
29         }
30       })
31      })
32</script>
33

試したこと

ここに問題に対して試したことを記載してください。

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

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

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

回答2件

NodeListのようなArrayっぽいオブジェクトをArrayとして扱いたいのであれば、
Array.fromを使うのがいいです。
今回のケースで言えば、こんな感じです。

Javascript
1Array.from(c1).forEach(function(list)
2{
3    ...
4}

※追記
NodeListでもforEachは有効でしたね。失礼しました。

これだけでは何なので、改めて回答します。
質問のコードでは下記の点が問題になります。
1.style属性の書き換えが両方ともdisplay:blockになっている。
2.要素毎に表示/非表示の判別を行っていない。
3.要素から次の兄弟要素を取得するなら、nextElementSiblingで一発。
これを踏まえまして、こんな感じで。

const c1 = document.querySelectorAll('.class-num1');

c1.forEach(function(list)
{
	list.addEventListener('click', function()
	{
		c1.forEach(function(node)
		{
			this.nextElementSibling.setAttribute("style", node == this ? "display:block" : "display:none" );
		},this);
	});
});

余談ですが、表示/非表示を切り替えるなら、style属性を直接書き換えるのではなく、cssで非表示のクラスを作って、classListのadd,remove,toggleで対応するのが楽でいいです。

css
1.hide{display:none}

Javascript
1targetElement.classList.add("hide");   //非表示
2targetElement.classList.remove("hide");//表示
3targetElement.classList.toggle("hide");//切り替え

投稿2020/12/20 11:28

編集2020/12/20 12:14

AT_2nd

総合スコア266

document.querySelectorAll('.members') で返ってくるのは配列ではなくオブジェクトです。試しに F12 を押してコンソールで typeof document.querySelectorAll('div')とすると良いでしょう。

で、オブジェクトの length というのは信用なりません。なぜかというと値以外にメソッドの数なんかもカウントされてしまうからです。ではどうするか。幸いにして返ってくるオブジェクトは iterable なオブジェクトですので

JavaScript
1for(let i = 0; i < members.length; i++) {
2  ...

の代わりに

JavaScript
1for(const member of members) {
2 ....

を使ってみてください。

追記：
Rails について調べることになり非常に悔しいのですが、Rails の where 関数は複数の引数を取れないようです。それならそれでエラー出せって話なんですが……。詳細は以下をお読みください。
【Rails】find・find_by・whereについてまとめてみた - Qiita

Ruby
1User.where(grade:1, class_number:1)

を

Ruby
1User.where(grade:1).where(class_number:1)

に変えるとよいのではないでしょうか。

JavaScript にもまだ問題があるかと思いましたが、なんとか動きそうではありました。ですがより操作を楽にしたいならば

HTML
1              <span class="class-num1">１−１</span>
2              <div>
3                  <div class="members">
4                    <%= f.collection_check_boxes :user_ids, User.where(grade:1, class_number:1).all.order("student_number ASC"), :id, :name %>
5                  </div>
6              </div>

とネストを一段深くすることも検討してみてください。class 名も変えてあげると見通しが良くなるでしょう。

投稿2020/12/19 09:33

編集2020/12/19 11:18