Click here to Skip to main content
15,746,302 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Here is the modular way of js literal object.
In the 'display' function, 'this' refers normally.
But in 'addEvt' this refers to something else.
Since the object where the click event occurred becomes 'this', this pointing to a member function cannot be used. How can I solve this problem?

What I have tried:

let s_text = {};
var currentPanel = function(){
       var prefix = '';
       var subtext = '';
       return {
           setText: function(text){
              subtext = text;
           getText: function(){
              return subtext;
           display: function(text){
               return '<span>'+subtext+'</span>'
           addEvt: function(){
               document.getElementById('canvas'+id).onclick = function(){ 
                   let args = {};                                   
                   var id = $(this).attr('data-root');                        
                   args['page' = $(this).attr('data-page');
                   args['c_id'] = $(this).attr('data-ole');
                   args['panel'] = $(this).attr('data-target');
                      /* here, 'This' is not object*/
                      args['length'] = this.getText(args['page']).length;
                   return args;
var foo = Object.create(currentPanel());
s_text = foo.addEvt();
Updated 24-Nov-22 2:05am
Member 15627495 24-Nov-22 11:25am    
 $(selector).Attr(....) is a jquery use.

maybe try it by 'native Js'
var or let ?

var myVar; is a global var, reachable from all js pattern in your page. //
let anothervar; seems to be more reliable with your object and its inner vars.

1 solution

The problem is, you're not referencing this within the addEvt function; you're referencing it from the handler for the onclick event raised on the canvas.

Within that event handler, you seem to be expecting this to point to both the element that was clicked, and the object the event handler was added from.

You'll need to capture the outer this reference. You'll also need to fix up your $(this) references, and fix the syntax error in your function.
addEvt: function(){
   const me = this;
   document.getElementById('canvas'+id).onclick = function(e){
       const el = $(;
       const args = {};                                   
       var id = el.attr('data-root');                        
       args['page'] = el.attr('data-page');
       args['c_id'] = el.attr('data-ole');
       args['panel'] = el.attr('data-target');
       const text = me.getText(args['page']);
       if (text){
          args['length'] = text.length;
       return args;

Once you've sorted that, you'll need to check your logic. For example, returning an array from the onclick event handler isn't going to do what you think it will do.
Share this answer
Chopin2001 24-Nov-22 20:59pm    
Thanks a lot.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900