Top.Mail.Ru
Ответы
Аватар пользователя
sasha_trikolich_6
1г
Аватар пользователяПрограммирование

Массивы в js

подскажите пожалуйста как сделать так чтоб элементы из массива ( строка с картинкой и текстом) выводились по очереди ?
у меня сейчас выводятся в случайном порядке

1234567891011121314151617181920212223242526272829303132333435
 let phrases = [
  { text: 'отправить другу смешную гифку', image: 'https://code.s3.yandex.net/web-code/procrastinate/1.gif' },
  { text: 'посмотреть скидки на авиабилеты', image: 'https://code.s3.yandex.net/web-code/procrastinate/2.png' },
  { text: 'разобраться, о чём поют рэперы', image: 'https://code.s3.yandex.net/web-code/procrastinate/3.png' },
  { text: 'Arzamas', image: 'https://code.s3.yandex.net/web-code/procrastinate/4.png' },
  { text: 'расставить книги на полке по цвету', image: 'https://code.s3.yandex.net/web-code/procrastinate/5.png' },
  { text: 'читать про зарплаты в Сан-Франциско', image: 'https://code.s3.yandex.net/web-code/procrastinate/6.png' },
  { text: 'прочитать новости и ужаснуться в комментариях', image: 'https://code.s3.yandex.net/web-code/procrastinate/7.png' },
  { text: 'попасть в поток грустных песен и вспомнить все ошибки молодости', image: 'https://code.s3.yandex.net/web-code/procrastinate/8.png' },
  { text: 'посмотреть трейлер сериала и заодно первый сезон', image: 'https://code.s3.yandex.net/web-code/procrastinate/9.png' },
  { text: 'проверить непрочитанное в Telegram-каналах', image: 'https://code.s3.yandex.net/web-code/procrastinate/10.png' }
];
  
  function getRandomElement(arr) {
    let randIndex = Math.floor(Math.random() * arr.length);
    return arr[randIndex];
  }
  
  let button = document.querySelector('.button');
  let phrase = document.querySelector('.phrase');
  let advice = document.querySelector('.advice');
  let image = document.querySelector('.image');
  
  button.addEventListener('click', function () {
    let randomElement = getRandomElement(phrases);
    smoothly(phrase, 'textContent', randomElement.text);
    smoothly(image, 'src', randomElement.image);
  
    if (randomElement.text.length > 40) {
      advice.style.fontSize = '33px';
    } else {
      advice.style.fontSize = '42px';
    }
  });
По дате
По рейтингу
Аватар пользователя
danil_lasyi
Оракул
1г

for(let i=o;i<n;i++){
alert("text");
} -принцип такой(n - число фраз)

Аватар пользователя
diana_56662
Просветленный
1г

тобы элементы из массива выводились по очереди, а не в случайном порядке, вам нужно изменить функцию `getRandomElement` так, чтобы она возвращала элементы массива по порядку, а не случайным образом. Для этого можно использовать переменную, которая будет отслеживать текущий индекс элемента в массиве. После каждого вызова функции этот индекс увеличивается, и функция возвращает следующий элемент массива.

вот так


12345678910111213141516171819202122232425262728293031323334353637383940
 let phrases = [ 
  { text: 'отправить другу смешную гифку', image: 'https://code.s3.yandex.net/web-code/procrastinate/1.gif' }, 
  { text: 'посмотреть скидки на авиабилеты', image: 'https://code.s3.yandex.net/web-code/procrastinate/2.png' }, 
  { text: 'разобраться, о чём поют рэперы', image: 'https://code.s3.yandex.net/web-code/procrastinate/3.png' }, 
  { text: 'Arzamas', image: 'https://code.s3.yandex.net/web-code/procrastinate/4.png' }, 
  { text: 'расставить книги на полке по цвету', image: 'https://code.s3.yandex.net/web-code/procrastinate/5.png' }, 
  { text: 'читать про зарплаты в Сан-Франциско', image: 'https://code.s3.yandex.net/web-code/procrastinate/6.png' }, 
  { text: 'прочитать новости и ужаснуться в комментариях', image: 'https://code.s3.yandex.net/web-code/procrastinate/7.png' }, 
  { text: 'попасть в поток грустных песен и вспомнить все ошибки молодости', image: 'https://code.s3.yandex.net/web-code/procrastinate/8.png' }, 
  { text: 'посмотреть трейлер сериала и заодно первый сезон', image: 'https://code.s3.yandex.net/web-code/procrastinate/9.png' }, 
  { text: 'проверить непрочитанное в Telegram-каналах', image: 'https://code.s3.yandex.net/web-code/procrastinate/10.png' } 
]; 
 
let currentIndex = 0; // Начальный индекс 
 
function getNextElement(arr) { 
  if (currentIndex >= arr.length) { 
    currentIndex = 0; // Возвращаемся к началу массива, если достигнут конец 
  } 
  let nextElement = arr[currentIndex]; 
  currentIndex++; // Увеличиваем индекс на 1 
  return nextElement; 
} 
 
let button = document.querySelector('.button'); 
let phrase = document.querySelector('.phrase'); 
let advice = document.querySelector('.advice'); 
let image = document.querySelector('.image'); 
 
button.addEventListener('click', function () { 
  let nextElement = getNextElement(phrases); 
  smoothly(phrase, 'textContent', nextElement.text); 
  smoothly(image, 'src', nextElement.image); 
 
  if (nextElement.text.length > 40) { 
    advice.style.fontSize = '33px'; 
  } else { 
    advice.style.fontSize = '42px'; 
  } 
});
Больше по теме