0

Подскажите как исправить.
Есть массив и нужно вывести каждый элемент по очереди и записать его в параграф при нажатии на кнопку.
Нажал на кнопку, вывелось в параграф "идти". Нажал еще раз вывелось "бежать", "идти" пропало. Нажал 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>

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

4
  • А после спать - по кругу?
    – splash58
    Commented 31 окт. 2018 в 13:58
  • p.innerHTML += ru[i];
    – haswell
    Commented 31 окт. 2018 в 14:00
  • @haswell Нажал еще раз вывелось "бежать", "идти" ПРОПАЛО, не нужно все подряд выводить. Commented 31 окт. 2018 в 14:02
  • Я так понял, нужно где-то хранить индекс элемента массива, который выводится в данный момент, чтоб при последующем нажатии на основе этого индекса вывести следующее значение массива, все верно? Commented 31 окт. 2018 в 14:04

3 ответа 3

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>

1
  • остаток от целочисленного деления на 3
    – splash58
    Commented 31 окт. 2018 в 14:14
0

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>

0

Почти тоже самое, но с хранением индекса в 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);
}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.