@emrhssla said in Uncaught TypeError: this.sendNotification is not a function at HTMLParagraphElement.:
the word ‘this’ has a defined meaning… context of THIS object at the time of execution.
the issue is that at that moment in time the code is inside the eventhandler, NOT your module. (the routine that did the addEventListener() ended minutes ago) so it has its OWN ‘this’ context… there are three ways to get back to the module context
-
declare a global variable (self) and use that so the execution processor knows what you want, watch out, global variables are global, names may collide across modules…
-
use a different function declaration () => {} instead of function(){}… tells the execution processor to use the surrounding context …these are called Arrow functions… Arrow functions do not have their own ‘this’
BUT you need to pass params on the function call to get access to the element where the event happened -
use the bind() operator to add the outer module context to the event context
function(){}.bind({inner_varname:outer_varname)… .bind({module_this:this})
elem.addEventListener(“click”,
function(){
elem.innerHTML = “TEST2”
this.sendNotification(‘CHANGE_POSITIONS’,
modules = {
‘clock’:{
visible: ‘true’,
position: ‘top_left’,
},
}
)
}
)
you will have to research these and decide how to do it… each has a different implementation and code maintenance impact