Problem with the scenes and click

[codespress]

First I apologize for the bad translation, my language is Spanish. I'm new to phaser 3, so far everything is fine, I have configured it with the typescript and so far everything has gone smoothly, I am still not clear about how the scenes or events work and I was presented with a curious problem. I have created a button that when you click it takes you to a scene, that button I have to create it twice so I use a "for" to save code, I save the image in an array to call it three times, but this is when they happen the problems, if I do it manually, that is, code by code, the code works perfectly but using the for or saving the image in the array no, I show you:

 

/* ||| - Dependecie - ||| */
/* - Phaser - */
import { Scene } from "phaser";

/* || - Import - || */
/* - GameConfig - */
import { GameConfig } from "./../../index";
/* - DataSlot - */

/* || - Consts - || */
const buttonCreateSlot: Phaser.GameObjects.Image[] = [];
const ySlotCard = 83;
const yHeight = 50;

/* || - Lets - || */
export let selectSlot: iSlotConfig;
let i: number = 0;

/* || - SelectSlot - || */
export default class SelectSlot extends Scene {
  create() {
    /* | - Create 3 slot for - | */
    for (i = 0; i < 3; i++) {
      /* | - Add Image - | */
      /* - Add image SelectSlot_typeimage_static_slotCardGame - */
      this.add
        .image(
          GameConfig.scale.width / 2,
          ySlotCard * i + yHeight,
          "SelectSlot_typeimage_static_slotCardGame",
          i
        )
        .setOrigin(0.5, 0);
      /* | - Add button createdSlot === "no" - |*/
      /* - Add buttonCreateSlot - */
      buttonCreateSlot.push(
        this.add
          .image(
            GameConfig.scale.width / 2 + 61,
            ySlotCard * i + 60 + yHeight,
            "SelectSlot_typeimage_button_createSlot"
          )
          .setOrigin(0.5, 0)
          .setInteractive()
          .setFrame(0)
          .setVisible(true)
          .on("pointerover", function (event) {
            buttonCreateSlot[i].setFrame(1);
          })
          .on("pointerout", function (event) {
            buttonCreateSlot[i].setFrame(0);
          })
          .on("pointerdown", function (pointer) {
            if (pointer.leftButtonDown()) {
              this.scene.scene.start("CreateSlot");
              buttonCreateSlot[i].setFrame(2);
            }
          })
          .on("pointerup", function (pointer) {
            if (pointer.leftButtonReleased()) {
              buttonCreateSlot[i].setFrame(1);
            }
          })
      );
    }
  }
}

 

Quote

Uncaught TypeError: Cannot read property 'setFrame' of undefined

 

Curiously, if in the variable i I put the 0 it worked but logically for the image in the position of the array 0, I don't understand why it doesn't work with the for, so I solved it by creating a function. the code looked like this:
 

/* ||| - Dependecie - ||| */
/* - Phaser - */
import { Scene } from "phaser";

/* || - Import - || */
/* - GameConfig - */
import { GameConfig } from "./../../index";
/* - DataSlot - */

/* || - Consts - || */
const buttonCreateSlot: Phaser.GameObjects.Image[] = [];
const ySlotCard = 83;
const yHeight = 50;

/* || - Lets - || */
export let selectSlot: iSlotConfig;
let i: number = 0;

/* || - Functions - || */
/* - fuction buttonDCreateSlotOn - */
let buttonCreateSlotOn = (idOn: number) => {
  buttonCreateSlot[idOn].on("pointerover", function (event) {
    buttonCreateSlot[idOn].setFrame(1);
  });
  buttonCreateSlot[idOn].on("pointerout", function (event) {
    buttonCreateSlot[idOn].setFrame(0);
  });
  buttonCreateSlot[idOn].on("pointerdown", function (pointer) {
    if (pointer.leftButtonDown()) {
      this.scene.scene.start("CreateSlot");
      buttonCreateSlot[idOn].setFrame(2);
    }
  });
  buttonCreateSlot[idOn].on("pointerup", function (pointer) {
    if (pointer.leftButtonReleased()) {
      buttonCreateSlot[idOn].setFrame(1);
    }
  });
};

/* || - SelectSlot - || */
export default class SelectSlot extends Scene {
  create() {
    /* | - Create 3 slot for - | */
    for (i = 0; i < 3; i++) {
      /* | - Add Image - | */
      /* - Add image SelectSlot_typeimage_static_slotCardGame - */
      this.add
        .image(
          GameConfig.scale.width / 2,
          ySlotCard * i + yHeight,
          "SelectSlot_typeimage_static_slotCardGame",
          i
        )
        .setOrigin(0.5, 0);
      /* | - Add button createdSlot === "no" - |*/
      /* - Add buttonCreateSlot - */
      buttonCreateSlot.push(
        this.add
          .image(
            GameConfig.scale.width / 2 + 61,
            ySlotCard * i + 60 + yHeight,
            "SelectSlot_typeimage_button_createSlot"
          )
          .setOrigin(0.5, 0)
          .setInteractive()
          .setFrame(0)
          .setVisible(true)
      );
      buttonCreateSlotOn(i);
    }
  }
}

So far everything is fine, it works but when I enter a scene "scene.start (B)" for example and then return to "scene.start (A)" the buttons stop working as well as the effects of "pointerover, pointerout, between others "in reality everything related to the clicks of that image stops working, because I used as an example a" pointerdown "without an image, just right click, and everything works perfectly, curiously if I sleep the scene and then wake it up in the scene If everything works for me as if nothing else but the effect I am looking for is that I restart the scene since scene.restart () does not work either.

This only works if I do it this way, since I tested it by doing image by image and saving it in different variables eg ""let buttonOne = ...;" "let buttonTwo = ...; ""

And so, and my intention is to reduce the code, if I do it that way the code works perfectly, which I have thought about doing, doing it that way since it is only with three images but in the same way I am curious about know what I'm doing wrong. As I mentioned, it is just that I started with programming and I just use typescript and I want to use it in my projects and I am just studying phaser 3 and I have a hard time understanding the official photonstorm documentation so I read the rexrainbow documentation. I hope you can clarify my doubts about what I am doing wrong. Greetings Internet users.