JavaFX Array of Buttons that Dissapear when clicked - arrays

Question

We're trying to make an array of buttons that will dissappear when theyre clicked on. The problem is that we get an out of bounds error no matter which button we click on. If we click button(1,3) we would like just that button to dissappear (by using the remove function).
This is our current code:
public class Main extends Application {
public static void main(String[] args) {
System.out.println("Start of JavaFX");
launch(args);
System.out.println("End of JavaFX");
}
//--module-path "/Users/jonathan/Documents/JavaFX/javafx-sdk-15.0.1/lib" --add-modules
javafx.controls,javafx.fxml
private int width = 10;
private int height = 10;
private int i;
private int j;
private StackPane[][] stk = new StackPane[width][height];
Button[][] button = new Button[width][height];
Label[][] lbl = new Label[width][height];
#Override public void start(Stage primaryStage) {
GridPane gridPane = new GridPane();
for (i = 0 ; i <= width-1 ; i++) {
for (j = 0 ; j <= height-1 ; j++) {
//System.out.println(i + "," + j);
button[i][j] = new Button();
lbl[i][j] = new Label();
button[i][j].setText("B");
lbl[i][j].setText("X");
stk[i][j] = new StackPane(lbl[i][j],button[i][j]);
gridPane.add(stk[i][j], i, j, 1, 1);
button[i][j].setOnAction(e -> buttonClick(i,j));
}
}
Scene scene = new Scene(gridPane);
primaryStage.setScene(scene);
primaryStage.show();
}
public void buttonClick(int i, int j) {
System.out.println(i + "," + j);
stk[i][j].getChildren().remove(button[i][j]);
}
}

Answer 1

The problem is you probably deliberately bypassed the warning "variable used in lambda expression should be final or effectively final" in the for-loop when directly creating the variable in it. Making it final above this loop caused the problem.
Now the i and j index just keeps changing until your last iteration in the for-loop (which is 10, 10). Every button uses that same variables, instead of creating a new independent variable for each individual button.
The solution is to create a new (final) variable for each button:
Code (notice how you now can create the variables "i" and "j" in the for-loop):
for (int i = 0 ; i <= width-1 ; i++) {
for (int j = 0 ; j <= height-1 ; j++) {
button[i][j] = new Button();
lbl[i][j] = new Label();
button[i][j].setText("B");
lbl[i][j].setText("X");
stk[i][j] = new StackPane(lbl[i][j],button[i][j]);
final int indexI = i; // _SOLUTION_
final int indexJ = j; // _SOLUTION_
gridPane.add(stk[i][j], i, j, 1, 1);
button[i][j].setOnAction(e -> buttonClick(indexI,indexJ)); // _SOLUTION_
}
}
Running the application:
Output when clicking a few buttons, notice how "10,10" is no longer printed: