2

Есть функция конструктор, представим, что buttons = document.querySelectorAll("button") (для примера две кнопки на странице), а sound — строка со звуком, который издает животное при нажатии на одну из кнопок.

var Animal = function (buttons, sound) {
  this.buttons = buttons;
  this.sound = sound;
};

Теперь определяю методы для будущего объекта в прототипе:

Animal.prototype.addListeners = function () {
  for (var i = 0; i < this.buttons.length; i++) {
   this.addButtonHandler(button[i]);
  }
};

Animal.prototype.addButtonHandler = function (button) {
 button.addEventListener("click", function () {
  this.makeSound();
 });
};

Animal.prototype.makeSound = function () {
 console.log(this.sound);
};

Создаю животного:

var buttons = document.querySelector("button");
var cat = new Animal(buttons, "Мяу");

В итоге не работает, почему-то не мяукает. Я думаю что проблема в addButtonHandler в том, что я добавляю обработчик события, который вызывает функцию this.makeSound(). То есть когда происходит клик по кнопке для обработчика this.makeSound() не определено. Не знаю прав ли я, но в любом случае прошу помощи, как это пофиксить, в чем проблема??? Возможно вопрос глупый, простите, только изучаю JS, не все еще понимаю...

var Animal = function(buttons, sound) {
  this.buttons = buttons;
  this.sound = sound;
};

Animal.prototype.addListeners = function() {
  for (var i = 0; i < this.buttons.length; i++) {
    this.addButtonHandler(buttons[i]);
  }
};

Animal.prototype.addButtonHandler = function(button) {
  button.addEventListener("click", function() {
    this.makeSound();
  });
};

Animal.prototype.makeSound = function() {
  var element = document.createElement("h1");
  element.textContent = this.sound;
};

var buttons = document.querySelectorAll("button");
var cat = new Animal(buttons, "Мяу");
cat.addListeners();
<button>
Издать звук
</button>

<button>
Издать звук
</button>

2
  • 1
    эммм а где именно вы вызываете addListeners
    – ThisMan
    Commented 10 авг. 2018 в 22:29
  • 1
    у вас в коде несколько ошибок
    – ThisMan
    Commented 10 авг. 2018 в 22:31

1 ответ 1

3

Вместо элемента выводится alert, потому что не понятно куда добавлять элемент. Но если нужно, то используйте appendChild

var Animal = function(buttons, sound) {
  this.buttons = buttons;
  this.sound = sound;
  // не было вызова this.addListeners
  this.addListeners();
};

Animal.prototype.addListeners = function() {
  for (var i = 0; i < this.buttons.length; i++) {
    // тут вы к button[i] обращались, что не правильно
    // this.addButtonHandler(button[i]);
    this.addButtonHandler(this.buttons[i]);
  }
};

Animal.prototype.addButtonHandler = function(button) {
  // тут вы потеряли контекст this.makeSound не определена
  // button.addEventListener("click", function() {
  //  this.makeSound();
  // });
  // стрелочная функция сохранит контекст
  button.addEventListener("click", () => {
    this.makeSound();
  });
};

Animal.prototype.makeSound = function() {
  // var element = document.createElement("h1");
  // element.textContent = this.sound;
  // куда вы добавляете этот элемент? Никуда
  alert(this.sound);
};

var buttons = document.querySelectorAll("button");
var cat = new Animal(buttons, "Мяу");
<button>
Издать звук
</button>

<button>
Издать звук
</button>

1
  • Спасибо, извиняюсь за многочисленные ошибки, очень быстро писал код, но основная проблема в моем проекте была как раз в потери контекста.
    – n1k333
    Commented 10 авг. 2018 в 22:43

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.