Используйте кнопку для отображения одной строки массива за раз в Javascript

Question

Я создаю текстовый генератор, который циклически перебирает строки массива по одной в порядке сверху вниз, переходя к следующей строке при каждом нажатии кнопки. Приведенная ниже функция циклически перебирает строки по порядку, но все они повторяются после одного шага sh кнопки. Как я могу указать функции, чтобы она ожидала отображения следующей строки, пока кнопка не будет нажата снова?

function newThing() {
    var i = 0;
    setInterval(function() {
    document.getElementById('thingDisplay').innerHTML = oddthing[i++];
    if (i == oddthing.length) i = 0;
    }, newThing.active);
}

var oddthing = [
'<p>111111111</p>',
'<p>222222222</p>',
'<p>333333333</p>',
'<p>444444444</p>',
'<p>555555555</p>',
'<p>666666666</p>',
'<p>777777777</p>',
'<p>888888888</p>',
'<p>999999999</p>'
]

<div>
  <div align="center" id='thingDisplay'></div>
</div>

<div>
  <button class="box" id="button01" onclick="newThing()">New Thing</button>
</div>

<script src="javascript.js"></script>

Answer 1

Это один из способов:

var oddthing = [
'<p>111111111</p>',
'<p>222222222</p>',
'<p>333333333</p>',
'<p>444444444</p>',
'<p>555555555</p>',
'<p>666666666</p>',
'<p>777777777</p>',
'<p>888888888</p>',
'<p>999999999</p>'
]

// add a global counter
var count = 0;

function newThing() {
    document.getElementById('thingDisplay').innerHTML = oddthing[count];
    count++;
    if (count >= oddthing.length) count = 0;
}

Answer 2

Удалите setInterval и объявите i вне функции:

function initDisplay($btn, $display, array) {
  var i = 0;
  $btn.addEventListener('click', function() {
    $display.innerHTML = array[i++];
    if (i >= array.length) i = 0;
  });
}

initDisplay(
  document.getElementById('button01'),
  document.getElementById('thingDisplay'), [
    '<p>111111111</p>',
    '<p>222222222</p>',
    '<p>333333333</p>',
    '<p>444444444</p>',
    '<p>555555555</p>',
    '<p>666666666</p>',
    '<p>777777777</p>',
    '<p>888888888</p>',
    '<p>999999999</p>'
  ]
);

initDisplay(
  document.getElementById('button02'),
  document.getElementById('thingDisplay2'), [
    '<p>AAAAA</p>',
    '<p>BBBBB</p>',
    '<p>CCCCC</p>'
  ]
);

<div>
  <div align="center" id='thingDisplay'>&nbsp;</div>
  <button class="box" id="button01">New Thing</button>
</div>

<div>
  <div align="center" id='thingDisplay2'>&nbsp;</div>
  <button class="box" id="button02">New Thing 2</button>
</div>

<script src="javascript.js"></script>