遍历数组文本响应

Question

当在我的网站上选择一个按钮时，我试图显示不同的输出。

HTML：

<div class="question">
  <p>How many sides does a hexagon have?</p>
  <button class="right-answer" onclick="showResult(this)">6</button>
  <button class="wrong-answer" onclick="showResult(this)">10</button>
</div>

<div>
  <p id="answer"></p>
</div>

JS：

 var _i = 0;
 var _wrongs = [
   'Incorrect!',
   'Wrong!',
   'False!',
   'Mistake!',
   'Error!',
   'Retry!'
 ];

 function showResult(b) {
   var res = document.getElementById('answer');
   if (b.classList.contains('right-answer')) {
     res.innerHTML = 'Correct'
   } else {
     res.innerHTML = _wrongs[_i];
     _i = _i > 1 ? 0 : _i + 1;
  }
 }

选择不正确的按钮时，每次应显示_wrongs 987654324中的值，输出不应自行重复。

这在一定程度上是可行的，但是……当多次选择错误的答案时，它似乎最多只能输出3个不同的答案，然后又会重新开始。

我怎样才能让它运行整个数组的长度？

Answer 1

你的三元线有误。将_i > 1 替换为_i >= _wrongs.length-1

_i = _i >= _wrongs.length-1 ? 0 : _i + 1;

这是一个updated codepen，它可以按您的预期工作。

以防万一你好奇...modulo operator、% 计算除法方程的余数，在这里也可以很好地工作。

_i++;
_i = _i % _wrongs.length;

见working example here。

Answer 2

改变这一行：

_i = _i > 1 ? 0 : _i + 1;

到这里

 _i = _i >= _wrongs.length  ? 0 : _i + 1;