Calling the this.method() inside function of another method

May 18, 2022

is there a way calling the createElement() method inside checkbox.off().on('click', function () {}) of checkBoxes() method? I cannot access the method inside the function within the method.

class Lists {
  constructor() {
    this.currentList = [];
    this.completedList = [];
  }


  createElement(
    value1 = undefined,
    value2 = undefined,
    value3 = undefined,
    checkboxCheck = ''
  ) {
    value3.append(`<li class="list-group-item p-3">
    <input type="checkbox" ${checkboxCheck}/>
      <span  class="span-item">
        ${value1}
      </span>
      <div class="float-end">
          <i class="fas fa-edit mx-2"></i>
          <i class="fas fa-trash mx-2"></i>
      </div>
      <br />
      <span class="span-time">${value2}</span>
      </li>`);
  }

  checkBoxes() {
    const checkbox = $('input[type=checkbox]');

    checkbox.off().on('click', function () {
      this.createElement(value1, value2...)
    });
  }
}

>Solution :

There are 3 ways.

// set 'this' to 'self' outside the function
const self = this;
checkbox.off().on('click', function () {
  self.createElement(value1, value2...)
});

//use Function.prototype.bind to pass 'this'
checkbox.off().on('click', function () {
  this.createElement(value1, value2...)
}.bind(this));

//use arrow function
checkbox.off().on('click', () => {
  this.createElement(value1, value2...)
});

but i suggest you to figure out why ‘this’ won’t work in your codes by searching.