у меня есть функция, которая создает и возвращает объект с отрисовкой простого блока и навешивает ивентлисенеры на элемент этого блока. Но я, не могу понять, почему при срабатывании toggler, возникает ошибка "Cannot read property 'hidden' of undefined".
menu.toggler = function () {
console.log(this)
this.header.addEventListener('click', function () {
console.log(this)
this.list.hidden = !this.list.hidden;
})
};
Я обвесил этот блок консоль логами, чтобы понять, что в this. В первом случае - понятно, там объект от имени которого вызвана функция. Во втором, почему-то уже улемент H1, хотя я ожидал увидеть там объект menu. Если я, вместо this, ставлю menu или вместо обычной функции - стрелку, то всё работает. тут ссылка на код https://jsfiddle.net/marader/a7oq8mwc/8/ спасибо.
function initMenu(element) {
let menu = {};
menu.element = element;
menu.render = function(){
this.element.innerHTML = `<h1 class="header">Menu header</h1>
<ul class="list">
<li class="item">123</li>
<li class="item">234</li>
<li class="item">3455</li>
</ul>
<input type="text" class="inp" placeholder="input text here!">
<button class="mybutton">Press me!</button>`
};
menu.render();
menu.header = element.querySelector('.header');
menu.list = element.querySelector('.list');
menu.inp = element.querySelector('.inp');
menu.mybutton = element.querySelector('.mybutton');
menu.toggler = function () {
this.header.addEventListener('click', function () {
console.log(this)
this.list.hidden = !this.list.hidden;
})
};
return menu;
}
let div1 = initMenu(document.querySelector('.block'));
div1.toggler();
<div class="block"></div>