JS Вывести из массива элементы по очереди

145

20 марта 2019, 03:00

Подскажите как исправить.
Есть массив и нужно вывести каждый элемент по очереди и записать его в параграф при нажатии на кнопку.
Нажал на кнопку, вывелось в параграф "идти". Нажал еще раз вывелось "бежать", "идти" пропало. Нажал 3 раз выводится след элемент "спать" и т.д.

function f1() { 
  var ru = ['идти', 'бежать', 'спать']; 
  var p = document.getElementById('ru') 
  for (var i = 0; i < ru.length; i++) { 
    p.innerHTML = ru[i]; 
  } 
}

<p id="ru"> </p> 
<button onclick="f1()">Push</button>

У меня выводится не по очереди, а только последний элемент массива.

Answer 1

var i = 0; 
var ru = ['идти','бежать', 'спать']; 
var p = document.getElementById('ru') 
function f1() { 
      p.innerHTML = ru[i++]; 
      i = i % 3 
  }

<p id="ru"> </p> 
<button onclick="f1()">Push</button>

Answer 2

var ru = ['идти', 'бежать', 'спать']; 
 
function f1() { 
  document.getElementById('ru').textContent = action.next().value; 
} 
 
let action = gen(); 
 
function* gen(i = 0) { 
  while (true) { 
    yield ru[i++ % 3]; 
  } 
}

<p id="ru"> </p> 
<button onclick="f1()">Push</button>

Answer 3

Почти тоже самое, но с хранением индекса в data атрибуте

function changeContent() {
    var ru = ['идти', 'бежать', 'спать'];
    var p = document.getElementById('p');
    var index = p.getAttribute("data-index") || 0;
    p.innerHTML = ru[index];
    index++;
    index = ru[index] ? index : 0;
    p.setAttribute("data-index", index);
}