javascript - onclick在各种文本之间切换

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

var qarray = ['canada', 'india', 'america']
var btn = document.querySelector('button');
btn.style.background = 'green';
btn.style.fontSize = '25px';
btn.style.color = 'white';

btn.addEventListener('click', function quotes() {
  var textselect = document.querySelector('h2');

  var one = textselect.textContent = qarray[0];

  btn.addEventListener('click', function quoteone() {
    var two = textselect.textContent = qarray[1];
    btn.addEventListener('click', function() {
      var three = textselect.textContent = qarray[2];
    })
  })
})

<h2>Shows 3 Country onclick</h2>

<button>Change</button>

最佳答案

定义新的事件侦听器时，不会删除旧的事件侦听器。所以最终所有的监听器都会运行，并且每次单击时都会不断添加更多的监听器。
只需使用使用全局变量保存当前数组索引的单个事件侦听器。

var qarray = ['canada', 'india', 'america'];
var qindex = 0;
var btn = document.querySelector('button');
btn.style.background = 'green';
btn.style.fontSize = '25px';
btn.style.color = 'white';

btn.addEventListener('click', function quotes() {
  var textselect = document.querySelector('h2');
  textselect.textContent = qarray[qindex];
  qindex = (qindex + 1) % qarray.length;
})

<h2>Shows 3 Country onclick</h2>

<button>Change</button>

模运算符用于在到达数组末尾时使索引环绕0。