JavaScript - 未捕获的ReferenceError：checkAnswer未定义，函数不在范围内？

Question

class Pairs extends Screen {
  constructor() {
    super();
    var pair1 = null;
    var nPair1;
    var solution;
    var rightCounter = 0;
    var licao, nS;
  }


  pairScreen(screen, lesson, nScreen) {
    var body = document.body
    var nodes = xmlDoc.getElementsByTagName("PAIRS");
    this.licao = lesson;
    this.nS = nScreen;

    this.solution = screen.getElementsByTagName("SOLUTION")[0].textContent.split(" ");

    body.innerHTML = '';

    Startup.h1(body, "Babel   (" + languageName + ")");
    Startup.hr(body);

    var d = DynamicHTML.div(body, "border:3px solid black; display:table; padding:20px; margin-left:40px");
    Startup.h1(d, "Match the pairs");

    var p1 = Startup.p(d, "padding-left:40px; word-spacing:50px;");
    Startup.text(p1, 16, " ");
    Startup.text(p1, 32, " ");

    var p2 = Startup.p(d, "padding-left:20px;");

    var button;


    var i;
    var f = function(i) {
      Startup.eventHandler2()
    }

    var original = screen.getElementsByTagName("ORIGINAL")[0].textContent;
    var buttons = original.split(" ");


    for (i = 0; i < buttons.length; i++) {
      button = DynamicHTML.inpuButton(p1, i, buttons[i], "orangered");
      Startup.eventHandler2(document.getElementById(i), "onclick", function() {
        checkAnswer(buttons[i], i)
      });
    }
    Startup.hr(body);
  }

  checkAnswer(pair, nPair) {
    var index;
    if (pair1 = null) {
      pair1 = pair;
      nPair1 = nPair;
    } else {
      for (index = 0; index < solution.length; index++) {
        if (pair1 == solution[index]) {
          if (index % 2 == 0 && solution[index - 1] == pair) {
            DynamicHTML.play("general/right_answer.mp3");
            rightCounter = rightCounter + 2;
            document.getElementById(nPair).disabled = true;
            document.getElementById(nPair1).disabled = true;
            pair1 = null;
            nPair1 = null;
          } else if (solution[index + 1] == pair) {
            DynamicHTML.play("general/right_answer.mp3");
            rightCounter = rightCounter + 2;
            document.getElementById(nPair).disabled = true;
            document.getElementById(nPair1).disabled = true;
            pair1 = null;
            nPair1 = null;
          } else {
            DynamicHTML.play("general/wrong_answer.mp3");
            pair1 = null;
            nPair1 = null;
          }

        }
      }
    }
    if (rightCounter == solution.length) {
      if (xmlDoc.getElementsByTagName("LESSON")[licao].childNodes[nS + 2] != null) {
        var fs = new Screen();
        fs.functionScreen(licao, nS + 2);
      } else fs.initialScreen();
    }

  }

}

Wrote this for a JavaScript project I'm working on but when I run it It says Uncaught ReferenceError: checkAnswer is not defined, I'd really appreciate if anyone knew the problem. Thank you!

PS Don't know if the checkAnswer function has bugs or note becausa I couldn't test it out, I will when I can run it :)

Answer 1

First you need to bind this at the end of this function:

Startup.eventHandler2(document.getElementById(i), "onclick", function() {
    this.checkAnswer(buttons[i], i)
}.bind(this));

Basically this tells the anonymous function "hey I want this to refer to this outer class, not the function itself".

(edited)

Answer 2

You need to either bind checkAnswer in the constructor like-so:

class Pairs extends Screen {
  constructor() {
    super();
    var pair1 = null;
    var nPair1;
    var solution;
    var rightCounter = 0;
    var licao, nS;
    this.checkAnswer = this.checkAnswer.bind(this);
  }

Or use and arrow function which gives you the exact reference to the this checkAnswer like-so:

checkAnswer = (pair, nPair) => {
    //your code goes here ...
    } 

This way you will be able to call this.checkAnswer inside the scope of your pairScreen function or wherever you want to call the function like @Davelunny point out