使用responsiveVoice api的Javascript数组

我正在构建一个应用程序，当我点击卡片时，它会翻转并生成一个随机单词。然后我将随机单词悬停。该程序正在调用responsiveVoice api，传递参数并说出单词。我的问题是这只是第一次起作用。当我再次点击卡片时，卡片翻转，然后我将鼠标悬停在随机文本上，重复最后的单词+新单词。知道如何解决javascript数组吗

var卡=[
{动物：“狗”，动物类型：“A”}，
{动物：“猪”，动物类型：“B”}，
{动物：“河马”，动物类型：“B”}，
{动物：“猫”，动物类型：“A”}，
];
常数
$card=document.querySelector（“.card”），
$demo=document.querySelector（“#demo”）；
让显示_text=true；
$card.addEventListener（'click'，函数（）{
$card.classList.toggle（'is-fliped'）；
如果（显示文本）{
var random_num=Math.floor（Math.random（）*4）；
$demo.innerHTML=卡片[random_num]。动物；
//这里
$（“#演示”）.hover（函数（）{
说（）；
});
函数speak（）{
回答声音。说话（卡片[random_num]。动物，“英国英语男性”）；
}
//结束
}
显示文本=！显示文本；
});

body{font-family:sans-serif；}
.现场{
宽度：308px；
高度：446px；
边框：1px实心#CCC；
利润率：40px0；
透视图：600px；
}
.卡片{
宽度：100%；
身高：100%；
转变：转变1s；
变换样式：保留-3d；
光标：指针；
位置：相对位置；
}
.卡片翻了{
变换：旋转（180度）；
}
.card___面{
位置：绝对位置；
宽度：100%；
身高：100%；
/*线高：260px*/
颜色：白色；
文本对齐：居中；
字体大小：粗体；
字体大小：40px；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
}
.card___面-正面{
/*背景：红色*/
}
.card___面–背面{
背景#009688；
变换：旋转（180度）；
}

返回
单击要翻转的卡。

我已将悬停事件置于单击事件之外

var卡=[{
动物：“狗”，
动物型：“A”
},
{
动物：“猪”，
动物类型：“B”
},
{
动物：“河马”，
动物类型：“B”
},
{
动物：“猫”，
动物型：“A”
},
];
常数
$card=document.querySelector（“.card”），
$demo=document.querySelector（“#demo”）；
让显示_text=true；
var随机数；
//这里
$（“#演示”）.hover（函数（）{
说（）；
});
函数speak（）{
回答声音。说话（卡片[random_num]。动物，“英国英语男性”）；
}
//结束
$card.addEventListener（'click'，function（）{
$card.classList.toggle（'is-fliped'）；
如果（显示文本）{
random_num=Math.floor（Math.random（）*4）；
$demo.innerHTML=卡片[random_num]。动物；
}
显示文本=！显示文本；
});
正文{
字体系列：无衬线；
}
.现场{
宽度：308px；
高度：446px；
边框：1px实心#CCC；
利润率：40px0；
透视图：600px；
}
.卡片{
宽度：100%；
身高：100%；
转变：转变1s；
变换样式：保留-3d；
光标：指针；
位置：相对位置；
}
.卡片翻了{
变换：旋转（180度）；
}
.card___面{
位置：绝对位置；
宽度：100%；
身高：100%；
/*线高：260px*/
颜色：白色；
文本对齐：居中；
字体大小：粗体；
字体大小：40px；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
}
.card___面-正面{
/*背景：红色*/
}
.card___面–背面{
背景#009688；
变换：旋转（180度）；
}

返回
点击卡片翻转