Is there a way to cycle through a 2d array and change a text element's text with phaser.js

Question

Trying to just cycle through them as shown below opens the dialogue, displays the first bit of dialogue, but then doesn't let me move forward. Any variables not defined in this snippet of code are defined in another file.
I updated it with the full code.
Any variable is defined correctly, and files and phaser.js are all imported correctly

File 1

// Initialize Phaser game
const game = new Phaser.Game(800, 576, Phaser.AUTO, 'game-container', {
    //25x18 grid for objects, assuming they are 32x32
    preload: preload,
    create: create,
    update: update,
});

// Preload game assets
function preload() {
    game.load.image('player', 'assets/player.png');
    game.load.image('wall', 'assets/wall.png');
    game.load.image('wallend', 'assets/wallend.png');
    game.load.image('box', 'assets/box.png');
    game.load.image('sign', 'assets/sign.png');
}

// Create game objects
function create() {
    // Enable arcade physics
    game.physics.startSystem(Phaser.Physics.ARCADE);
    map = game.add.group();
    map.enableBody = true;
    boxes = game.add.group();
    boxes.enableBody = true;
    signs = game.add.group();
    signs.enableBody = true;


    dialogueBox = game.add.graphics(0, 0);
    dialogueBox.lineStyle(5, 0xffd700, 1);
    dialogueBox.beginFill(0x000000); // Set the fill color to gold
    dialogueBox.drawRect(75, 375, 650, 150);
    dialogueBox.endFill(); // End the fill
    dialogueBox.visible = false;
        dialogueSpeaker = this.add.text(100, 385, 'null', {
        fontSize: 15,
        color: '#FFFF00',
        fill: '#FFFF00',
        fontFamily: 'main'
    });
    dialogueText = this.add.text(110, 410, 'null', {
        fontSize: 22,
        color: '#FFFFFF',
        fill: '#FFFFFF',
        fontFamily: 'main',
        wordWrap: true,
        wordWrapWidth: 625,
    });
    dialogueText.visible = false;
    dialogueSpeaker.visible = false;
    for (let row = 0; row < mapData.length; row++) {
        for (let col = 0; col < mapData[row].length; col++) {
            if (mapData[row][col] === 10) {
                player = game.add.sprite(col * 32, row * 32, 'player');
            } else if (mapData[row][col] === -1) {
                const wallend = map.create(col * 32, row * 32, 'wallend');
                wallend.body.immovable = true;
                wallend.body.setSize(32, 16, 0, 8); //let player tuck under objects
            } else if (mapData[row][col] === 2) {
                const box = boxes.create(col * 32, row * 32, 'box');
            } else if (mapData[row][col] === 1) {
                const wall = map.create(col * 32, row * 32, 'wall');
                wall.body.immovable = true;
            } else if (typeof mapData[row][col] === 'string' && mapData[row][col].startsWith('3')) {
                const sign = signs.create(col * 32, row * 32, 'sign');
                sign.id = mapData[row][col]
                sign.body.setSize(32, 20, 0, 36);
            }
        }
    }
    game.physics.arcade.enable(player);
    player.body.collideWorldBounds = true;
    // Create player

    // Set up keyboard input
    cursors = game.input.keyboard.createCursorKeys();

    // Set camera to follow player
    game.camera.follow(player);
}

directionArray = ['down'];
// Update game state
function update() {
    // Player movement
    player.body.velocity.x = 0;
    player.body.velocity.y = 0;
    if (!player.positionLocked) {
        if (game.input.keyboard.isDown(Phaser.Keyboard.A)) {
            player.body.velocity.x = -150;
            directionArray.push('left');
            game.input.keyboard.event.preventDefault();
            directionArray = directionArray.filter((element) => element !== 'right');
        } else {
            directionArray = directionArray.filter((element) => element !== 'left');
        }
        if (game.input.keyboard.isDown(Phaser.Keyboard.D)) {
            player.body.velocity.x = 150;
            directionArray.push('right');
            game.input.keyboard.event.preventDefault();
            directionArray = directionArray.filter((element) => element !== 'left');
        } else {
            directionArray = directionArray.filter((element) => element !== 'right');
        }
        if (game.input.keyboard.isDown(Phaser.Keyboard.W)) {
            player.body.velocity.y = -150;
            directionArray.push('up');
            game.input.keyboard.event.preventDefault();
            directionArray = directionArray.filter((element) => element !== 'down');
        } else {
            directionArray = directionArray.filter((element) => element !== 'up');
        }
        if (game.input.keyboard.isDown(Phaser.Keyboard.S)) {
            player.body.velocity.y = 150;
            directionArray.push('down');
            game.input.keyboard.event.preventDefault();
            directionArray = directionArray.filter((element) => element !== 'up');
        } else {
            directionArray = directionArray.filter((element) => element !== 'down');
        }
    }
    player.direction = directionArray[0];
    // Collision detection
    game.physics.arcade.collide(player, map);
    game.physics.arcade.collide(player, boxes);
    game.physics.arcade.collide(boxes, map);
    game.physics.arcade.collide(boxes, boxes);

    game.input.keyboard.onDownCallback = null;

    // Push box when player collides with it
    game.physics.arcade.overlap(player, boxes, pushBox, null, this);
    game.physics.arcade.overlap(player, signs, pushSign, null, this);
}
function pushSign(player, sign) {
    var id = sign.id;
    var speechIndex = 1;
    id = id.split(" ");
    id = parseInt(id[1]);
    dialogueSpeaker.text = speech[id][0];
    dialogueText.text = speech[id][speechIndex];
    try {
        game.input.keyboard.onDownCallback = function(event) {
            if (event.keyCode === Phaser.Keyboard.E) {
                if (player.inSign && speechIndex >= speech[id].length - 1) {
                    player.inSign = false;
                    dialogueBox.visible = false;
                    dialogueText.visible = false;
                    dialogueSpeaker.visible = false;
                    player.positionLocked = false;
                } else {
                    player.inSign = true;
                    dialogueBox.visible = true;
                    dialogueSpeaker.visible = true;
                    dialogueText.visible = true;
                    player.positionLocked = true;
                }
    speechIndex++;
    dialogueText.text = speech[id][speechIndex];
            }
        };
    } catch (err) {
        null;
    }

}


// Push box function
function pushBox(player, box) {
    if (cursors.left.isDown) {
        box.body.velocity.x = -pushSpeed;
    } else if (cursors.right.isDown) {
        box.body.velocity.x = pushSpeed;
    } else if (cursors.up.isDown) {
        box.body.velocity.y = -pushSpeed;
    } else if (cursors.down.isDown) {
        box.body.velocity.y = pushSpeed;
    }
}

File 2

let speech = [
    ["Bill Board", "null.", "dia2","dia3","dia4"]
]

Answer 1

Your code is not easy to debug, because many parts are missing.
It is important, only call/create the eventhandler once in the create/init/ ... function not from the update function. Apart from that everything should be straightforward.

Here a short demo showcasing this:

(It is built in Phaser3, I'm not 100% sure which version you are using)

document.body.style = 'margin:0;';

var config = {
    width: 536,
    height: 183,
    scene: { create },
}; 

var speech = [
    ["Bill Board", "null.", "dia2","dia3","dia4"]
];

var speechIndex = 0;

function create () {
    this.add.text(10,10, 'Press Space to cycle "speech" ')
        .setScale(1.5)
        .setOrigin(0)
        .setStyle({fontStyle: 'bold', fontFamily: 'Arial'});
        
    this.message = this.add.text(10, 40, 'Selected Message:' )
        .setOrigin(0)
        .setStyle({fontStyle: 'bold', fontFamily: 'Arial', fontStyle:'italic bold'});

    this.input.keyboard.on('keydown-SPACE', function(){
        let innerIndex = 0;
        if(speech[innerIndex].length <= speechIndex){
            speechIndex = 0;
        };
        
        this.message.setText( `Selected Message: ${ speech[innerIndex][speechIndex]}`);
        
        speechIndex++;
               
    }, this);
}

new Phaser.Game(config);

<script src="//cdn.jsdelivr.net/npm/phaser/dist/phaser.min.js"></script>

I was bored, here a phaser2 example:

document.body.style = 'margin:0;';


const game = new Phaser.Game(536, 183, Phaser.AUTO, 'game-container', {
    create: create,
});

var speech = [
    ["Bill Board", "null.", "dia2","dia3","dia4"]
];

var speechIndex = 0;

function create () {
    let style = { font: "bold 32px Arial", fill: "#fff" };
    let style2 = { font: "bold 24px Arial", fill: "#fff" };
    game.add.text(10,10, 'Press Space to cycle "speech" ', style);

    let changingText = game.add.text(10,50, 'Selected Message:', style2);
    
    game.input.keyboard.onDownCallback = function(){

        if (event.keyCode === Phaser.KeyCode.SPACEBAR) {
            let innerIndex = 0;
            if(speech[innerIndex].length <= speechIndex){
                speechIndex = 0;
            };
            changingText.setText( `Selected Message: ${ speech[innerIndex][speechIndex]}`, true);
            speechIndex++;
        }   
    };
}

<script src="//cdnjs.cloudflare.com/ajax/libs/phaser-ce/2.19.2/phaser.min.js"></script>