Javascript event listener don't work inside an object method -

this question has answer here:

• how access correct `this` inside callback? 5 answers

consider code:

function elements() {     this.mainsection = document.queryselector('.main-section');     this.searchbtn = document.getelementbyid('search');     this.searchbar = document.queryselector('.search-bar');     ...   }    var initiate = new elements();    initiate.togglebar = function() {     console.log(this.mainsection);   }    initiate.addclick = function() {     this.searchbtn.addeventlistener('click', this.togglebar );   }    initiate.addclick(); 

on click event returns undefined, parenthesis runs function automatically.

why eventlistener behave way?

p.s. i'm learning javascript, , trying write flexible code. practice doing, or on complicating things?

you can change

this.searchbtn.addeventlistener('click', this.togglebar ); 

to

this.searchbtn.addeventlistener('click', this.togglebar.bind(this)); 

for code work :)

the problem this context lost function this.togglebar when assign addeventlistener. please refer https://developer.mozilla.org/en-us/docs/web/api/eventtarget/addeventlistener#the_value_of_this_within_the_handler further details.