遍历数组文本响应

Question

I am trying to display a different output when a button is selected on my website.

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;
  }
 }

When the incorrect button is selected, a value found in the _wrongs array should be displayed each time, and the output should not repeat itself.

This works to an extent, however...when selecting the incorrect answer numerous times, it seems to only output a maximum of 3 different responses, and will then start back up again.

How can I make it so that it will run the entire length of the array?

Answer 1

You had a mistake in your ternary line. Replace _i > 1 with _i >= _wrongs.length-1

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

Here's an updated codepen that works as you intended.

And just in case your curious...The modulo operator , % , which calculates the remainder of the division equation, would work nicely here too.

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

See working example here .

Answer 2

change this line:

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

to this

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