В список
цикл JS добавляет только последний элемент массива

Question

Не могу понять как работает forEach или необходимо использовать что-то другое. Подскажите, пожалуйста, нужно в список из <li> добавить значения из массива.

<ul>
  <li class="title"></li>
  <li class="title"></li>
  <li class="title"></li>
  <li class="title"></li>
  <li class="title"></li>
  <li class="title"></li>
  <li class="title"></li>
  <li class="title"></li>
  <li class="title"></li>
</ul>

Array:

[
0: "The Matrix Resurrections"
1: "The Matrix"
2: "Sexual Matrix"
3: "Matrix"
4: "The Matrix Reloaded"
5: "Before I Fall"
6: "Sex and the Matrix"
7: "The Matrix Revolutions"
8: "アミテージ・ザ・サード DUAL-MATRIX"]

JS:

 titlesColl = document.querySelectorAll('.title')
    titles.forEach(function (title) {
      titlesColl.forEach(el => {
        el.innerHTML = title
      })
    });

Answer 1

const items = [
  "The Matrix Resurrections",
  "The Matrix",
  "Sexual Matrix",
  "Matrix",
  "The Matrix Reloaded",
  "Before I Fall",
  "Sex and the Matrix",
  "The Matrix Revolutions",
  "アミテージ・ザ・サード DUAL-MATRIX",
];

const list = document.querySelector('ul');
items.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item;
  list.appendChild(li);
});

<ul></ul>

А если прям-таки обязательно уже существующие <li> заполнять, то

const items = [/*...*/];
[...document.querySelectorAll('ul li')].forEach(
  (li, idx) => li.textContent = items[idx] || 'Упс, нет такого элемента в массиве'
);

Answer 2

Вам тут не нужен цикл в цикле, иначе вы всё время по очереди перезаписываете значения элементов. Попробуйте воспользоваться аргументом индекса, достаточно одного прохода, раз структуры параллельны и индексы совпадают:

const titles = [
  "The Matrix Resurrections",
  "The Matrix",
  "Sexual Matrix",
  "Matrix",
  "The Matrix Reloaded",
  "Before I Fall",
  "Sex and the Matrix",
  "The Matrix Revolutions",
  "アミテージ・ザ・サード DUAL-MATRIX",
];

const titlesColl = document.querySelectorAll('.title');

titlesColl.forEach(function (el, index) {
  el.innerHTML = titles[index];
});

<ul>
  <li class="title"></li>
  <li class="title"></li>
  <li class="title"></li>
  <li class="title"></li>
  <li class="title"></li>
  <li class="title"></li>
  <li class="title"></li>
  <li class="title"></li>
  <li class="title"></li>
</ul>

БЛОГ НА HUSL

В список
цикл JS добавляет только последний элемент массива

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

БЛОГ НА HUSL

В список цикл JS добавляет только последний элемент массива

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

В список
цикл JS добавляет только последний элемент массива