Почему свойство в классе JS не меняется его методом?

Question

[Дима]

Я хочу объявить в конструкторе свойство, в которое бы записывались значения из других методов и оно было бы доступно для работы этим методам, как это лучше сделать? Мой вариант ниже, this.value не хочет принимать значение метода handler :(

class NewClass {
  value = null;
  constructor() {
    this.elem = document.createElement("div");
    this.elem.innerHTML = "5";
    document.body.append(this.elem);
  }
  handler() {
    this.elem.addEventListener("click", function(e) {
      // присваиваем свойству значение, но оно не присваивается :(
      this.value = e.target.textContent;
    });
  }
  viewValue() {
    //а так присваивается ¯\_(ツ)_/¯
    this.value = 0;
    this.handler();
    console.log(this.value);
  }
}

let a = new NewClass();
a.viewValue();

Comments

[0xD34F]

бегом читать

[Rerurk]

this.elem.innerHTML = "5"; это зачем?

[Дима]

Rerurk, чтоб разметку не делать быстро создал элемент, чтобы из него передать значение textContent в свойство

[Rerurk]

Дима, а что вообще сделать то хотите? А то то ли я тупой код не понимаю

[Дима]

Rerurk, хочу чтобы значение элемента div передавалось аргументом в метод объекта)

Answer 1

[xnkka]

В метод нужно передать контекст класса

class NewClass {
      value = null;
      constructor() {
        this.elem = document.createElement("div");
        this.elem.innerHTML = "5";
        document.body.append(this.elem);
      }
      handler() {
        this.elem.addEventListener("click", this.setValue.bind(this));
      }
      viewValue() {
        //а так присваивается ¯\_(ツ)_/¯
        this.value = 0;
        this.handler();
        console.log(this.value);
      }
      setValue(e) {
        // присваиваем свойству значение, но оно не присваивается :(
        this.value = e.target.textContent;
      }
    }

Comments

[Дима]

Спасибо!Я наверное, что-то не понял, но ведь сейчас из другого метода this.value по-прежнему недоступно, а мне нужно чтобы после клика оно равнялось 5 (так как div.textContent = 5) и было доступно для других методов:

class NewClass {
      value = null;
      constructor() {
        this.elem = document.createElement("div");
        this.elem.innerHTML = "5";
        document.body.append(this.elem);
      }
      handler() {
        this.elem.addEventListener("click", this.setValue.bind(this));
      }
      viewValue() {
        this.handler();
        console.log(this.value);
        //this.value по-прежнему null
      }
      setValue(e) {
        this.value = e.target.textContent;
      }
    }

  let a = new NewClass();
  a.viewValue();

[Aetae]

a.viewValue(); у тебя вызывается сразу после создания, а клик ты делаешь сильно потом.

[Дима]

Aetae, и как поступить?)

[Aetae]

Дима, как вам надо, так и поступайте, яж не знаю чего вы хотите от этого класса.
Просто держите в уме, что вы не можете вывести значение, которое ещё не было назначено: javascript не обладает пророческими алгоритмами и предсказать какое значение там окажется после клика и будет ли когда-нибудь вообще тот самый клик - не может.
Если вам нужно значение по умолчанию - так задавайте его в конструкторе.

[Дима]

Aetae, мне не нужно значение по умолчанию, мне нужно передать в свойство значение элемента по которому был клик.
Я вызываю в this.handler() метод addEventListener который «слушает» все клики, пока ему не приказать обратное, разве нет?

[Aetae]

Дима, если не было клика - нет и значения.
->
Вы не можете вывести значение до того как был клик.
->
Выводите значение после клика.