Помогите решить задачу js с временным циклом

Я новичок, так что знаю только самую основную базу, поэтому попробуйте написать самый легкий вариант данной задачи. Спасибо!

Задача в том, чтобы при нажатии кнопки Prompt запрашивал строку и строка, введённая пользователем, создавалась в виде отдельного элемента на страничке и ее номер каждые пять секунд в течении минуты. Сделать задачу надо используя SetTimeout/setInterval,цикл

Пример: Text 1 Text 2 Text 3…


Ответы (1 шт):

Автор решения: De.Minov

Т.к. вы новичок, то развивайте мышление.
Как по мне, в программирование главное сформулировать в голове решение задачи, остальное знания синтаксиса и особенностей языка.

Ваша задача уже содержит в себе готовый код:

Задача в том, чтобы при нажатии кнопки Prompt запрашивал строку и строка, введённая пользователем, создавалась в виде отдельного элемента на страничке и ее номер каждые пять секунд в течении минуты.

Ссылками выделил нужные методы для решения данной задачи.


Но если вам лень разбираться самостоятельно, то вы ничему так и не научитесь.
И всё же, я напишу для вас код, но мой совет - почитайте и попытайтесь понять его, а не просто скопипастить и выдать за своё решение.

document.querySelector('#btn').addEventListener('click', function() { // При нажатии на кнопку
  let text = prompt('Введите текст:'); // запрашиваем строку
  
  if(text.length > 0) { // если строка не пустая
    let i = 1; // создаём счётчик
    let timer = setInterval(function() { // создаём "временной цикл"
      if(i <= 12) { // 12 = 1 минута / 5 секунд, т.е. "каждые 5 сек в течении 1 мин" будет 12 шагов с интервалом в 5 секунд
        let el = document.createElement('div'); // создаём отдельный элемент
        el.innerText = text+' '+i++; // записываем текст, где i++ текущий шаг
        document.body.append(el); // добавляем элемент в body
      } else clearInterval(timer); // когда шагов будет больше 12, то удаляем таймер
    }, 5000); // 1000мс * 5 = 5 секунд
  } else return false; // если текст пустой, то ничего не делаем.
});
<button id="btn">Нажми</button>

→ Ссылка