thのcellIndexの取得

Question

前提・実現したいこと

javascriptでソート付きの表を作成しています。
見出しセルをクリックして、セルのインデックスを取得したいのですが、
どのセルをクリックしても同じ数字が出てしまいます。

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

どのthをクリックしても3

該当のソースコード

const tbl_ths =['Name', 'gender','Team', 'Score',];
const tbl_dat=[
  ['Tokieda','男','red','2'],
  ['takahashi','男','blue','12'],
  ['miyahashi','男','blue','31'],
  ['taguchi','女','Orange','32'],
];

class setHead {
  constructor(els){
    const table = document.querySelector('table');
    this.thead = document.createElement('thead');
    this.tr=document.createElement('tr');
    for(let i=0;i<els.length;i++){
      this.th=document.createElement('th');
      this.th.innerHTML=els[i];
      this.th.addEventListener('click',()=>{

         console.log(this.th.cellIndex)
　　　　　　 //この部分が問題↑
     
 })
      this.tr.appendChild(this.th);
    }
    this.thead.appendChild(this.tr);
    table.appendChild(this.thead);
  }
}

class setDate {
  constructor(array){
    const table = document.querySelector('table');
    this.tbody = document.createElement('tbody');
   
    array.forEach(els => {
      this.tr=document.createElement('tr');

        for(let i=0;i<els.length;i++){
          this.td=document.createElement('td');
          this.td.innerHTML=els[i];
          this.tr.appendChild(this.td);  
        };

      this.tbody.appendChild(this.tr);
    })
    table.appendChild(this.tbody);
  }

}

const header=new setHead(tbl_ths);
const date = new setDate(tbl_dat);

何故同じ番号しか現れないのか？どのようにしたら取得できるか、教えてください。

Comments

[m.ts10806]

thisってこのとき必要なんでしょうか（まだ動かして確認してないけど、ここが原因な気もする）

[pokenasu11]

ありがとうございます。ご指摘の通りでした。

Answer 1

forループで、this.thという変数が上書きされていることが原因です。
this.thには一度はcellIndexが0や1の要素が代入されますが、最終的にforループを抜けたときにはthis.thにはcellIndexが3の要素が上書き代入された状態になっており、全てのイベントハンドラはそのcellIndexが3の要素を見ることになります。

forループ内でletやconstで新たに宣言したものであればループして上書きされることはないので、以下のようにしましょう。

class setHead {
  constructor(els){
    const table = document.querySelector('table');
    this.thead = document.createElement('thead');
    this.tr=document.createElement('tr');
    for(let i=0;i<els.length;i++){
      const th=document.createElement('th');
      th.innerHTML=els[i];
      th.addEventListener('click',()=>{

         console.log(th.cellIndex);

      })
      this.tr.appendChild(th);
    }
    this.thead.appendChild(this.tr);
    table.appendChild(this.thead);
  }
}

Comments

[pokenasu11]

ご指摘の通りに変更したらうまくいきました。
thisの使い方をよく考えないとダメですね。
ありがとうございました。