Can't destroy the buttons in my program

Phaser 3
1

I make an educational program in Phaser 3 for my pupils who are at home now because of the coronacrisis in Belgium. It’s a dictation program in Dutch. They hear a word, then they see some letters (buttons) on the screen. When they click the right buttons, it’s the intention the buttons disappear for a new collection of buttons for a new word.

digitee4

I create the buttons with the following code:

this.buttonLetters[t] = new ButtonImage(this, startX1 + (160 * t), 1015,‘letters’, (letter + ‘.png’), () => this.actionButtonLetter(t,showLetters),’’);

letters is a spritesheet with all the letters of the alfabet.
actionButtonLetter is a function: when a button is clicked, the letter is showed on the screen.
showLetters is a function that shows the letters the pupil has chosen.

Everything works fine, except the end. When the word is typed correctly, I will destroy the buttons to make place for a new collection:

for(let t:number = 0; t < this.word.length; t++){
  this.buttonLetters[t].destroy();
}

I got an error: Cannot read property ‘0’ of undefined (for this.knopletters[t])

I hope that someone can give me a good solution. My program is nearly finished, but now I’m stuck on this problem.

Thx in advance!

2

What are this.buttonLetters and this at this point?

3

this.buttonLetters[t] are the buttons I store in an array: in the example

this.buttonLetters[0] = “a”
this.buttonLetters[1] = “c”
this.buttonLetters[2] = “e”
…
I hope this is the right way to work with buttons, it works for now.

4 
console.log(this, this.buttonLetters, this.word);

for (let t: number = 0; t < this.word.length; t++) {
  console.log(t, this.buttonLetters[t]);

  this.buttonLetters[t].destroy();
}