Control animation loops with a variable?

Phaser 3
1

I am very new to phaser and javascript, so I apologize if this is a super obvious question.

I am trying to create an interaction where users click buttons to manipulate counters and then click another button to trigger an animation to loop a specific number of times. Basically, the users click ‘+’ and ‘-’ buttons to set two numbers and then click a ‘go’ button to make the animation loop a number of times equal to the sum of those two numbers.

I created a variable called loopTimes. I then created a button:

totalButton.on('pointerdown', function () {
    loopTimes = varCountOne + varCountTwo;
    totalText.setText(loopTimes);
    var i = 0;
    horse.anims.play('numerate');

});

and an animation:

    this.anims.create({
        key: 'numerate',
        frames: this.anims.generateFrameNumbers('dude', {start: 0, end: 3}),
        frameRate: 10,
        repeat: variableNumber
    });

If I set loopTimes to a number at the start of the script the sprite will loop that number of times when I press the button. Unfortunately, when loopTimes is updated at the start of the totalButton, that value does not appear to carry into the animation.

Put another way, if I set loopTimes = 10 at the start of the script and varCountOne + varCountTwo equals 5 when the button is pressed, the sprite will loop 10 times. My intended behavior is that it would loop 5 times.

I kind of assume this is some sort of global/local variable thing, but even if that is true I don’t know how to fix it.

thanks!