JavaScript using bool to control callbacks

Question

I have a bool variable that I have initially declared true.

I have an .on('click')event that checks if the bool is true and if so, if calls function1, and function1 sets the bool to false.

If bool is false function2 is called and sets bool to true.

However, the bool is not working as it should and I am a lost for why.

My code is below:

cells.on('click', function(d, i) {
      if (d.vis === 'text') {
        console.log('test');
        if (this.boolGame == true) {
          myThis.updateList(d);
          console.log('setting false');

        } else if (this.boolGame == false) {
          myThis.collapseList();
          console.log('true');

        }

This is a sample of one of the functions

 collapseList() {

    let gameList = this.tableElements.filter(d => d.value.type == 'games');
    console.log(gameList);
    // this.tableElements.splice();
    console.log('false');
    this.boolGame = false;

}

Probably a duplicate of [How to access the correct `this` inside a callback?](https://stackoverflow.com/q/20279484/218196). I see that you have a `myThis` variable that you use to call the functions, but you are using `this.boolGame` to compare the value. You probably want to use `myThis.boolGame` instead. Also, you never want to use loose comparison to compare against booleans. In your case you should just use `if (myThis.boolGame) { ... } else { ... }`. — Felix Kling, Oct 12 '17 at 00:32
chances are `this` is not what you expect inside an event handler — Jaromanda X, Oct 12 '17 at 00:32
What's is the `this` object? When you have an event click, the callback function will have `this` set to the object. — Alex Santos, Oct 12 '17 at 00:32

score 1 · Accepted Answer · answered Oct 12 '17 at 00:56

1

Try using console.log(this.boolGame). It's not working because it's undefined. functions that are created with the function syntax have their own context. As in, it has created its own this variable and it doesn't contain any attributes that you set in the scope above it. You have two options: using bind, or an arrow function.

bind. Turn it into a named function and use bind on it. This creates a copy of this.cellsHandler with the inner context you're looking for.

this.cellsHandler = function(d, i) {
  if (d.vis === 'text') {
    console.log('test');
    if (this.boolGame == true) {
      myThis.updateList(d);
      console.log('setting false');
    } else if (this.boolGame == false) {
      myThis.collapseList();
      console.log('true');
    }
  }
}
cells.on('click', this.cellsHandler.bind(this))

Turn your function into an arrow function. Arrow functions have no context, so it takes in the this from the scope above it, which has boolGame in it. I recommend this approach.

cells.on('click', (d, i) => {
  if (d.vis === 'text') {
    console.log('test');
    if (this.boolGame == true) {
      myThis.updateList(d);
      console.log('setting false');
    } else if (this.boolGame == false) {
      myThis.collapseList();
      console.log('true');
    }
  }
}

answered Oct 12 '17 at 00:56

Andrew

7,201
5
25
34

Hey thank you so much for the help! I get messed up with the change of 'this'. I implemented the second example but for some reason it doesn't recognize the bool initialized as true and neither of the functions are executed. The .on event is in an update function and I have the "let boolGame = true;" within an above constructor function. Within the update function when I console.log(this.boolGame); it comes back as undefined. Any ideas? – Sockness_Rogers Oct 12 '17 at 01:27
@jrogers12 Wait, are you saying you have `let boolGame = true` in your constructor? Do you actually mean you have `this.boolGame = true`? Because the two are very different. – Andrew Oct 12 '17 at 03:44
I have let boolGame = true within the constructor. I did not want to declare the this.booGame = true outside of the .on click event but within the update function because it gets called more to redraw the table. – Sockness_Rogers Oct 12 '17 at 04:33
@jrogers12 Just to make sure we're on the same page: assigning a variable with `let var const` make them local variables. They are only available inside your constructor `function`. You cannot access `let boolGame` anywhere else. I am confused by your intended usage of `this.boolGame` now. What do you mean when you say that `this.boolGame` gets called multiple times? Isn't that the point? – Andrew Oct 12 '17 at 05:05
ah, haha that is my problem then. Thank you! – Sockness_Rogers Oct 12 '17 at 05:08

JavaScript using bool to control callbacks

1 Answers1