JavaScript - Uncaught 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();
    }

  }

}

Написал это для проекта JavaScript, над которым я работаю, но когда я его запускаю, там написано Uncaught ReferenceError: checkAnswer не определен, я был бы очень признателен, если бы кто-нибудь знал эту проблему.Спасибо!

PS Не знаю, есть ли в функции checkAnswer ошибки или заметка, потому что я не смог ее проверить, я смогу, когда смогу ее запустить:)

Answer 1

Вам необходимо либо связать checkAnswer в конструкторе следующим образом:

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);
  }

Или использовать функцию со стрелкой, которая дает вам точную ссылку на this checkAnswer примерно так:

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

Таким образом, вы сможете вызывать this.checkAnswer внутри области действия вашей pairScreen функции или там, где вы хотите вызвать функцию, например, @Davelunny, укажите

Answer 2

Сначала вам нужно связать this в конце этой функции:

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

В основном это говорит анонимной функции "эй, я хочу, чтобы this ссылался на этот внешний класс, а не на функциюсама ".

(отредактировано)