イベントリスナーとクラス追加削除のクラスを作りたい。

Question

前提・実現したいこと

イベントに応じて対象にクラスを追加・削除する、クラスを作成しているのですが、以下のエラーが出て解決できません。
どなたかご教授ください。

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

main.js:55 Uncaught TypeError: Cannot read property 'classList' of undefined
at HTMLButtonElement.<anonymous> (main.js:55)

  tglCls(doEvent, editCls) {
    this.eventTarget.addEventListener(doEvent, function () {
      this.editTarget.classList.toggle(editCls);　//←ここで、エラーが出ます
    });
  }

該当のソースコード

// main.js　今回はどちらもmain.js内での作業ですので、import,exportは必要ないと思われます。

const mobile = new EditClass('#header__mobile-menu__button','#global-container');
mobile.tglCls('click', 'menu-open');


// main.js
class EditClass {
  // eventTarget：イベント発火対象、editTarget：クラスを追加・削除する対象
  constructor(eventTarget, editTarget) {
    this.eventTarget = document.querySelector(eventTarget);
    this.editTarget = document.querySelector(editTarget);
  }

  // doEvent：イベントの種類(click,mouseover...etc)、editCls：実際に追加・削除するクラス名
  tglCls(doEvent, editCls) {
    this.eventTarget.addEventListener(doEvent, function () {
      this.editTarget.classList.toggle(editCls);
    });
  }
  addCls(doEvent, editCls) {
    this.eventTarget.addEventListener(doEvent, function () {
      this.editTarget.classList.add(editCls);
    });
  }
  removeCls(doEvent, editCls) {
    this.eventTarget.addEventListener(doEvent, function () {
      this.editTarget.classList.remove(editCls);
    });
  }
}

Answer 1

おそらくDOMを削除する際にDOMが未定義になっているので、まずはしっかりとDOMが生成されているかを確認して見てください

Comments

[minaraiegineer]

申し訳ありません。
DOMが未定義とはどういうことでしょうか？
一応HTML側で要素の設定はしてあります。

Answer 2

  tglCls(doEvent, editCls) {
    var _t = this;
    this.eventTarget.addEventListener(doEvent, function () {
      _t.editTarget.classList.toggle(editCls);　//←ここで、エラーが出ます
    });
  }

Comments

[minaraiegineer]

thisを定義したらできました、ありがとうございます。
今回のエラーはスコープの問題ですよね？

[kei344]

そうです。

[minaraiegineer]

ありがとうございます！
勉強します。