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。

Answer 2

更改此行：

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

到这个

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

循环遍历数组文本响应

2 个答案: