setInterval внутри ForEach

Question

Написал такой код:

let arr = [1, 2]

let div = document.querySelector('div')

arr.forEach(item => {
  setInterval(() => {

    let html = `<p>${item}</p>`

    div.innerHTML += html

  }, 1000)
})

Мне нужно что бы каждую секунду обновлялись мои две переменные html, но проблема в том что они вместо того что бы обновляться, добавляются в мой div. Как написать правильный цикл?

Answer 1

Поменять forEach и setInterval местами.

let arr = [1, 2]

let div = document.querySelector('div')
setInterval(() => {
  let html = '';
  arr.forEach(item => {
    html += `<p>${item}</p>`
  })
  div.innerHTML = html
}, 1000)

Answer 2

let arr = [1, 2];

function updateArray() {
  arr = document.getElementById("array").value.split(',');
}

let div = document.querySelector('.container');

setInterval(() => {
  arr.forEach((item, i) => {
    var ps = div.querySelectorAll('p');
    if (i >= ps.length) {
      div.innerHTML += `<p>${item}</p>`;
    } else {
      ps[i].textContent = item;
    }
  })
}, 1000)

<input id="array" value="a,b" />
<button onclick="updateArray()">Update</button>
<div class="container"></div>

Answer 3

let arr = [1, 2]
let div = document.querySelector('div')

arr.forEach(item => {
  var p = document.createElement('p')
  div.appendChild(p)
  setInterval(() => ++p.textContent, 1000)
})

<div></div>

БЛОГ НА HUSL

setInterval внутри ForEach

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