javascriptを使い、各trにある全てのtdに対してaddEventListenerで指定した動作を適用させたい

Question

前提・実現したいこと

javascriptを使い、各trにある全てのtdに対して下記のaddEventListenerで指定した、td(this.td.textContent == 1)を選択するとtdにcalss('td_hidden')が追加されtdが非表示になる動作を適用させたいと思っています。

tdHidden(){
this.td.addEventListener('click',()=>{
if(this.td.textContent == 1){
this.td.classList.add('td_hidden');}})}

現段階では下記のように最後のtdのみ適用されています。

<tr> <td>3</td> <td>2</td> <td>3</td> <td>1</td>←この箇所のみclassが追加され非表示になる </tr>

何方か、ご教授のほどよろしくお願い致します。

また、初めてteratailを使用する為、使い方等で規約違反に該当する箇所等がございましたら、ご指摘ください。
お手数おかけしますが、よろしくお願い致します。

### 該当のソースコード
class Concentration{
  constructor(){
     this.table = document.querySelector('table');

      
      this.tr = document.createElement('tr');
      this.tr.classList.add('tr_box');
  
  
    this.createRandom();
    this.createRandom();
    this.createRandom();
    this.createRandom();
    this.tdHidden();
    
  }

  createRandom(){
     this.td = document.createElement('td');
    for(let i = 0; i < 5; i++){
      this.td.textContent = Math.floor(Math.random()*i+1);
    }

    this.tr.appendChild(this.td);
    this.table.appendChild(this.tr);

  }

  tdHidden(){
    this.td.addEventListener('click',()=>{
      if(this.td.textContent == 1){
      this.td.classList.add('td_hidden');
      }
    })
  }
}

const items = [
new Concentration(),
new Concentration(),
new Concentration(),
new Concentration(),
new Concentration(),

]

```javascript

Comments

[m.ts10806]

この場合の「this」が何者なのか、確認されたのでしょうか。

[A_kirisaki]

class は人類には早すぎる……

[退会済みユーザー]

m.ts10806様のコメントを読み、再度この場合のthisが何者なのかを考えたところ、自己解決できました。

自分で考え直す機会を与えてくださり、感謝致します。
打倒class...。

Answer 1

人が生み出したものを、人類が使いこなせないでどうする

オブジェクトには rows cells の値は必要ないものと判断。

class Concentration {

  constructor (table){
    this.table = table;
  }

  createRandom (n) {
    let tr = this.table.insertRow ();
    for (let i = 0; i < n; i++)
      tr.insertCell ().textContent = i * Math.random () |0;
  }

  tdHidden (e) {
    if (e.textContent == '1')
      e.classList.add ('td_hidden');
  }

  handleEvent (event) {
    let e = event.target;
    if (this.table == e.closest ('table'))
      this.tdHidden (e.closest ('td'));
  }

  static create (table, rows, cells) {
    let obj = new this (table);

    for (let i = 0; i < rows; i++)
      obj.createRandom (cells);

    table.addEventListener ('click', obj, false);
    return obj;
  }
}

const a = Concentration.create (document.querySelector ('table'), 20, 10);
const items = a.table.rows;

Comments

[think49]

babu_babu_baboo さん
ご無沙汰しています。

> this.tdHidden (e.closest ('td'));

tableのつくりに依存する問題ですが、「table要素配下かつtd要素配下外」の領域でclickするとTypeErrorになってしまいます。
https://jsfiddle.net/91qyc0s6/

> if (this.table == e.closest ('table'))

逆にこちらは Concentration.create で addEventListener している限りは必ず、true になりますね。
(外部から addEventListener される可能性を考慮するなら、この作りが望ましいです)

改善案
https://jsfiddle.net/91qyc0s6/1/

[babu_babu_baboo]

おっ！久しぶりです。
ちゃんと見てくれていたのですね。もうちょっと精査して書くように心がけますね。
最近、create で作るのは、「簡単お任せ用」にするようになりました。

class を使い事例を示すこと。個々にイベントを張り付けるコードを駆逐すること。
頑張ってみます。（来春まで）

[think49]

> ちゃんと見てくれていたのですね。

実は1ヶ月前から見ていましたが、文体が旧来と違うのと、プロフィールで個人blogのリンクがなかったので、本人か分からなくてコメントを控えていました。
teratailはコメントに対する捉えかたがTAGIndexと大きく異なるので、コメントをつけるのにちょっとした覚悟が要ります。

■TAGIndex
お互いを昇華させる為にどんな些細な点でも指摘し合い、一つのコードに対して完成度を高める為の改善点を指摘し合う。
人ではなく、コードに対する評価。
回答者間に協力関係があり、ひとつの質問に複数の回答者が協力して解決に取り組む。

■teratail
回答に対するダメ出し、回答者への評価と受け取られがち。
自分が回答している場合、他人を蹴落として自分をBAに持ち上げようとしているように見る向きがある。
回答者同士はライバル関係であり、協力体制はない。

回答の評点/BAシステムの影響なのでしょう。
一時期、teratailでも意識の差を埋めようと一部回答者に指摘した際に会話した事がありましたが、純粋にコードの完成度を高めようとする共通認識は持てないと悟りました。
今にして思うと、TAGIndexは技術者意識の高い場所でしたね…。

babu_babu_babooさんと確信してからは、安心してTAGIndexの感覚で指摘が出来ました。
babu_babu_babooさんも遠慮なく、私に指摘してもらえると嬉しいです。

[babu_babu_baboo]

>回答者同士はライバル関係であり、協力体制はない。
>純粋にコードの完成度を高めようとする共通認識は持てない悟りました。

正しい評価ができない時点でお里が知れてるし、
まぁ他者のコードを見ている限り「弟子になりたい！」と、言いたくなるほどの人は…。
おっと、「この質問に関係ない事項への発言は・・・」とマスク警察みたいな奴の出番が回りそうだ！

遠慮なく、ご指導ご鞭撻の程を…。
そうそう、良いお年を！

Answer 2

自己解決方法

tdHidden(){
    let table = document.getElementById('table');
    for (let row of table.rows) {
      for(let cell of row.cells){
        cell.addEventListener('click',()=>{
    
          if(cell.textContent == 1){
         
            cell.classList.add('td_hidden');
          }
      })
    }
  }
}

Comments

[babu_babu_baboo]

解決して何より。
ただオブジェクト指向的なプログラムとは言えない。勘違いしています。テーブル要素を複数個用意して
let t = document.querySelectorAll('table');
Concentration.create(t[0], 10, 10);
Concentration.create(t[1], 10, 10);
Concentration.create(t[2], 10, 10);
などとして試してみると理解できると思います。
あと、すべての td要素に clickイベントは無駄です。

[退会済みユーザー]

ご丁寧に教えてくださりありがとうございます。
正直なところ、まだオブジェクト指向を理解できていません。
babu_babu_baboo様のように、間違いを指摘してくださる方が周りにいない為、上記の様なbabu_babu_baboo様のご指摘は私にとって非常に有難いものです。
今後、オブジェクト指向的なプログラムとは何かを念頭において学習を進めていきたいと思います。この度は誠にありがとうございました。

[A_kirisaki]

オブジェクト指向はプログラミング界の undefined みたいなものなんで誰も理解できてないっすよ（火種）

[babu_babu_baboo]

それは見聞が狭いだけ。