通過數組文本響應循環

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 >= _wrongs.length-1

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

更換_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;