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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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