JavaScript: forEach выводит на страницу только последний элемент массива. Как исправить?

Question

[sxivanov]

Всем привет, помогите обучающемуся! :)
В рамках курса работаю с JS и вот загвоздка:
Последний forEach отображает на странице только последний элемент массива movieDB.movies
НО! если вместо конструкции с innerHTML вписывать consol.log(item), то в консоле появляются все элементы.

'use strict';

const movieDB = {
    movies: [
        "Логан",
        "Лига справедливости",
        "Ла-ла лэнд",
        "Одержимость",
        "Скотт Пилигрим против..."
    ]
};

const img = document.querySelectorAll('.promo__adv img'),
      genre = document.querySelector('.promo__genre'),
      bg = document.querySelector('.promo__bg'),
      films = document.querySelectorAll('.promo__interactive-list .promo__interactive-item'),
      bgfilms = document.querySelector('.promo__interactive-list');
    
img.forEach(item => 
    item.remove());

genre.textContent = 'ДРАМА';

bg.style.cssText = "background: url('img/bg.jpg'); background-size: cover; background-position: top;";

films.forEach(item => 
    item.remove());

movieDB.movies.forEach(item =>
    bgfilms.innerHTML = `<li class="promo__interactive-item">${item}<div class="delete"></div></li>`);

Answer 1

[Pavel Shvedov]

Ты каждый раз перезаписываешь innerHTML, вместо этого нужно прибавлять к уже записанному

Answer 2

[Алексей Уколов]

bgfilms.innerHTML += `<li class="promo__interactive-item">${item}<div class="delete"></div></li>`

Answer 3

[Павел Корнилов]

bgfilms.innerHTML += `<li class="promo__interactive-item">${item}<div class="delete"></div></li>`

Вы просто перезаписываете постоянно содержимое тега.

Comments

[sxivanov]

Круто. Спасибо!

[Павел Корнилов]

sxivanov, на здоровье. Это сокращённый оператор, для понимания:

a += b то же, что и a= a+b