Как получить данные из переменной в методе класса?

Question

[FrelFrloich]

Доброго времени суток, вопрос пространный и конкретику привести не могу, за это извиняюсь.

Как получить данные из переменной в методе класса, формулировка скорее всего не правильная, на манер как делается в любых плагинах, будь то дата пикер, свайпер слайдер и т.п. Что по типу как в примерах ниже, к сожалению самостоятельные изыскания привели в тупик, пробовал подсмотреть в выше перечисленных плагинах, но не допёр.

песочница: https://codepen.io/frel-freloich/pen/KKGBEBK

let test = new BtnsHandler('.btn', {
    onChange(data) {
        console.log(data)
    },
})

Comments

[Юрий Матрос]

давай на пальцах, какая магия должна происходить?)

[FrelFrloich]

Юрий Матрос, Перечитал и правда ни черта не понятно что хочу.

Цель написать метод (если это метод конечно), onChange условно назовём так, благодаря которому я смогу при вызове класса получить текст при клике на кнопку, очень условный пример под описанием вопроса. Пример в песочнице. Как уже писал выше точно так же как это делается в любых плагинах.

Надеюсь в этот раз более понятно.

[Юрий Матрос]

FrelFrloich, ну ок, давай попробуем))

class MyClass {
  constructor() {
    this.buttons = document.querySelectorAll('.btn');
    this.onClick = this.onClick.bind(this);
  }

  onChange(callback) {
    this.callback = callback;
    this.buttons.forEach((button) => {
      button.addEventListener('click', this.onClick);
    });
  }

  onClick(event) {
    const buttonText = event.target.textContent;
    this.callback(buttonText);
  }
}

const myInstance = new MyClass();

myInstance.onChange((text) => {
  alert(`Выбрана кнопка: ${text}`);
});

[FrelFrloich]

Юрий Матрос, Благодарсвую) жаль что не могу отметить решённым.

[Юрий Матрос]

Копирнул в ответ

Answer 1

[Юрий Матрос]

class MyClass {
  constructor() {
    this.buttons = document.querySelectorAll('.btn');
    this.onClick = this.onClick.bind(this);
  }

  onChange(callback) {
    this.callback = callback;
    this.buttons.forEach((button) => {
      button.addEventListener('click', this.onClick);
    });
  }

  onClick(event) {
    const buttonText = event.target.textContent;
    this.callback(buttonText);
  }
}

const myInstance = new MyClass();

myInstance.onChange((text) => {
  alert(`Выбрана кнопка: ${text}`);
});