Why does Firefox see my array variable as undefined?

Question

In Adobe Animate I created a dynamic textfield. I've added 14 movieclips and on mouseover a different fabric name should appear in that dynamic textfield. In order to do so I first created an array with the fabric names. Then using a For loop I added the 14 eventlisteners. Just to keep the code nice and short. It all works perfect in Safari and Chrome. Upon hovering on one of the 14 movieclips a different fabric name appears.

But not in Firefox. It looks like it doesn't like my way of adding 14 eventlistners at the same time using a For loop. Cause when I do a console.log it declares that thesefabrics[i] variable as undefined. Like it didn't create that from thesefabrics[0] up to and including thesefabrics[13], but simply overwrote the creation of it upon every loop and ended with thesefabrics[14] (which is an empty variable).

What am I doing wrong and how can I make Firefox have it work the same way as Safari/Chrome does?

var whichfabric = this.fabrictext;

var thesefabrics = [
"Salt Burgundy", 
"Peach Blossom", 
"Grid Denim", 
"Dew Dark Blue", 
"Points Blue", "Facet Blue", 
"Maze Anthracite", 
"Rewool Brown", 
"Remix Peach Blue", 
"Reflect Coral Red", 
"Jaali Blue", 
"Plecto Blue Orange", 
"Clara Light Grey – Orange", 
"Sprinkles Brown"
];

var frequency = 3;
stage.enableMouseOver(frequency);

for (var i = 0; i < 14; i++) { 
this.fabriccontainer["fabric"+i].addEventListener("mouseover", function(){
    whichfabric.text = thesefabrics[i];
    });
    
this.fabriccontainer["fabric"+i].addEventListener("mouseout", function(){
    whichfabric.text ="";
    });
    
}