Есть функция конструктор, представим, что 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>
addListeners