Changing a JButton image when a button is pressed using an array

Question

I have a problem with my actionPerformed method. I want to change the buttons images every time a button is pressed. If I do this for a single button (button[0][0] for example) it works, but for all I get the

java.lang.ArrayIndexOutOfBoundsException

I got stuck here and I don't know how to fix the problem...

public class ExButtons {


JButton[][] button = new JButton[4][5];
ImageIcon[][] img = new ImageIcon[4][5];
ImageIcon cardTurned = new ImageIcon();

private final JPanel panel = new JPanel();
private final JFrame frame = new JFrame();
private int i, j;

public ExButtons() {

    img[0][0] = new ImageIcon("...");
    img[0][1] = new ImageIcon("...");
    img[0][2] = new ImageIcon("...");
    img[0][3] = new ImageIcon("...");
    img[0][4] = new ImageIcon("...");
    img[1][0] = new ImageIcon("...");
    img[1][1] = new ImageIcon("...");
    img[1][2] = new ImageIcon("...");
    img[1][3] = new ImageIcon("...");
    img[1][4] = new ImageIcon("...");
    img[2][0] = new ImageIcon("...");
    img[2][1] = new ImageIcon("...");
    img[2][2] = new ImageIcon("...");
    img[2][3] = new ImageIcon("...");
    img[2][4] = new ImageIcon("...");
    img[3][0] = new ImageIcon("...");
    img[3][1] = new ImageIcon("...");
    img[3][2] = new ImageIcon("...");
    img[3][3] = new ImageIcon("...");
    img[3][4] = new ImageIcon("...");
    cardTurned = new ImageIcon("...");

    for (i = 0; i < button.length; i++) {
        for (j = 0; j < button[0].length; j++) {
            button[i][j] = new JButton(img[i][j]);

        }
    }

    int x = 100, y = 100;

    for (i = 0; i < button.length; i++) {
        for (j = 0; j < button[0].length; j++) {

            button[i][j].setBounds(x, y, 60, 60);
            panel.add(button[i][j]);

            x += 80;

            if (j == 4) {

                x = 100;
                y += 80;
            }
        }
    }

    for (i = 0; i < button.length; i++) {
        for (j = 0; j < button[0].length; j++) {

            button[i][j].addActionListener(new ActionListener() {

                @Override
                public void actionPerformed(ActionEvent e) {

                    System.out.println("Button[" + i + "][" + j + "] was pressed");
                    button[i][j].setIcon(button[i][j].getIcon() == img[i][j] ? cardTurned : img[i][j]);

                }
            });
        }
    }

    frame.setSize(600, 600);
    frame.setLocationRelativeTo(null);
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    panel.setLayout(null);
    for (i = 0; i < button.length; i++) {
        for (j = 0; j < button[0].length; j++) {
            panel.add(button[i][j]);
        }
    }

    frame.add(panel);
    frame.setVisible(true);

}

public static void main(String[] args) {
    new ExButtons().frame.setVisible(true);
}
}

Answer 1

At the end of the loop, i and j are both out of bounds. So all your listeners uses these out of bound values for i and j.

i and j should not be fields. They should be local variables. And since the listeners need final variables, you need final copies of these variables:

for (int i = 0; i < button.length; i++) {
    for (int j = 0; j < button[0].length; j++) {

        final int i2 = i;
        final int j2 = j;

        button[i][j].addActionListener(new ActionListener() {

            @Override
            public void actionPerformed(ActionEvent e) {

                System.out.println("Button[" + i2 + "][" + j2 + "] was pressed");
                button[i2][j2].setIcon(button[i2][j2].getIcon() == img[i2][j2] ? cardTurned : img[i2][j2]);

            }
        });
    }
}

Or, simpler:

for (int i = 0; i < button.length; i++) {
    for (int j = 0; j < button[0].length; j++) {

        final JButton btn = button[i][j];
        final ImageIcon image = img[i][j];

        btn.addActionListener(new ActionListener() {

            @Override
            public void actionPerformed(ActionEvent e) {

                btn.setIcon(btn.getIcon() == image ? cardTurned : image);

            }
        });
    }
}

You should also definitely abandon the idea of setting the bounds of your buttons. Use a layout manager instead. That's its job.