javascript - 遍历数组文本响应

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 数组中找到的值，并且输出不应重复。

这在一定程度上有效，但是......当多次选择错误答案时，它似乎最多只输出 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 .