Javascript onclick在各种文本之间切换

我想在单击按钮时在多个文本之间切换。我已经创建了一个解决方案，但我希望看到更好的解决方案，在上次单击事件函数的末尾，我希望它继续从头开始

var qarray=['加拿大'、'印度'、'美国']
var btn=document.querySelector（'button'）；
btn.style.background='绿色'；
btn.style.fontSize='25px'；
btn.style.color='白色'；
btn.addEventListener（'click'，函数引号（）{
var textselect=document.querySelector（'h2'）；
var one=textselect.textContent=qarray[0]；
btn.addEventListener（'click'，函数quoteone（）{
var two=textselect.textContent=qarray[1]；
btn.addEventListener（'click'，function（）{
变量三=textselect.textContent=qarray[2]；
})
})
})

单击显示3个国家/地区
更改

定义新的事件侦听器时，您并没有删除旧的事件侦听器。因此，最终所有侦听器都会运行，并且每次单击时，它们都会不断添加更多内容

只需使用一个使用全局变量保存当前数组索引的事件侦听器

var qarray=[‘加拿大’、‘印度’、‘美国’]；
var-qindex=0；
var btn=document.querySelector（'button'）；
btn.style.background='绿色'；
btn.style.fontSize='25px'；
btn.style.color='白色'；
btn.addEventListener（'click'，函数引号（）{
var textselect=document.querySelector（'h2'）；
textselect.textContent=qarray[qindex]；
qindex=（qindex+1）%qarray.length；
})

单击显示3个国家/地区
更改

var qarray=['加拿大'、'印度'、'美国']
var btn=document.querySelector（'button'）；
btn.style.background='绿色'；
btn.style.fontSize='25px'；
btn.style.color='白色'；
var countClick=0；
btn.addEventListener（'click'，函数引号（）{
var textselect=document.querySelector（'h2'）；
如果（qarray.length>countClick）{
textselect.textContent=qarray[countClick]；
countClick++；
}否则{
countClick=0；
textselect.textContent=qarray[countClick]；
}
})

单击显示3个国家/地区
更改

您几乎不应该在另一个事件侦听器中添加事件侦听器。每次你点击这个按钮，你就会产生更多的监听器。我学习javascript做类似的事情，尽管它可以工作，但我觉得代码有问题，这就是我在这里发布它的原因，它很棒@barmar