Почему при добавлении новых элементов в массив, цикл их не видит?

Question

[Paul Golovin]

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

let goods = [
  { item: "umbrella", price: 3, index: 01 },
  { item: "gloves", price: 5, index: 02 },
  { item: "glasses", price: 6, index: 03 },
];

let input1 = document.createElement("input");
let input2 = document.createElement("input");
let input3 = document.createElement("input");
body.appendChild(input1);
body.appendChild(input2);
body.appendChild(input3);
let but = document.createElement("button");
but.textContent = "Add new goods";
body.appendChild(but);

let ul = document.createElement("ul");
for (let elem of goods) {
  let li = document.createElement("li");
  let content = `${elem.item}, цена ${elem.price}, номер ${elem.index}`;
  li.textContent = content;
  ul.appendChild(li);
  body.appendChild(ul);
}

but.addEventListener("click", function () {
  goods.push({
    item: input1.value,
    price: input2.value,
    index: input3.value,
  });
 });

Comments

[v3shin]

В массив вы элементы добавляете, а в DOM - нет. Допишите добавление.

Answer 1

[Dino Winchester]

Создаю с нуля инпуты и кнопку для добавления новых элементов массива, добавляю, но цикл их не видит и не выводит в окно.

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

let li = document.createElement("li");
let content = `${elem.item}, цена ${elem.price}, номер ${elem.index}`;
li.textContent = content;
ul.appendChild(li);

Но указав новые данные для: item, price, index.

Первый вариант

but.addEventListener("click", () => {
    goods.push({
        item: input1.value,
        price: input2.value,
        index: input3.value,
    });

    ul.innerHTML = goods.map(({ item, price, index }) => {
        return `<li>${item}, цена ${price}, номер ${index}</li>`
    }).join("");
});

Или:

Второй вариант

but.addEventListener("click", () => {
    goods.push({
        item: input1.value,
        price: input2.value,
        index: input3.value,
    });

    const { item, price, index } = goods[goods.length - 1];

    let li = document.createElement("li");
    let content = `${item}, цена ${price}, номер ${index}`;
    li.textContent = content;
    ul.append(li);
});

Comments

[Paul Golovin]

Так в том то всё и дело, что мне нужно чтобы данные брались с массива! Если я вставлю эту часть кода, новые li конечно будут добавляться, но не с данными с массива, выдаёт undefined. Проблема в том, что обработчик на кнопке добавляет новые элементы в массив, но все последующие обработчики не видят новых элементов.

[Paul Golovin]

Блин всё получилось, я оказывается неправильно ссылался на массив, вот такой код нужно вставить:
let li = document.createElement("li");
let content = goods[goods.length - 1].item+" , " +goods[goods.length - 1].price+" , "+goods[goods.length - 1].index;
li.textContent = content;
ul.appendChild(li);

Спасибо за подсказку!

[Dino Winchester]

Paul Golovin, можно сделать по другому. Обновил ответ.