How to call function from method inside class

Question

I have this piece of code:

class TestComponent {
  GenerateView() {
    var btntest = document.getElementById('btntest');
    btntest.onclick = function() {
      // this.test();  //this doesn't work
      alert("ok"); //this works

    }
  }
  test() {
    alert("ok");
  }

}
var d = new TestComponent();
d.GenerateView();

<div id="mydiv">
  <button id="btntest">test</button>
</div>

Why I can't use test function in onclick event for btntest? I have an error

this.test is not a function

When I didn't wrap in function, It worked.

Does this answer your question? [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — evolutionxbox, Mar 29 '21 at 14:45
`btntest.addEventListener("click", (evt) => { evt.preventDefault(); console.log(this); })` — epascarello, Mar 29 '21 at 14:58

score 1 · Answer 1 · answered Mar 29 '21 at 14:52

The 'this' part of this.test refers to the btntest element and not your class.

A simple fix for this is make reference variable for your class in your generateView function.

GenerateView()
    {
        var THIS = this;
        var btntest = document.getElementById('btntest');
        btntest.onclick = function() {
            THIS.test();
        }
    }

How to call function from method inside class

1 Answers1