Вывод на экран карточек с помощью методов forEach и append(). Новая карточка затирает предыдущую

Question

При запуске forEach программа проходит по массиву с данными карточек, создает на основе переданного шаблона каждую карточку (это видно в консоле).

Однако при выводе карточки на экран в соответствующее место методом append() каждая новая новая карточка затирает предыдущую, а должна вставляться же перед ней. В результате на экране остается только последняя созданная карточка.

Что в коде не так?

const boxesImages = [
    {
      name: "Box1",
      link: "../images/boxes.JPG",
    },
    {
      name: "Box2",
      link: "../images/shellboxes.JPG",
    },
    {
      name: "Box3",
      link: "../images/shells.JPG",
    },
    {
        name: "Box4",
        link: "../images/tumbs.JPG",
    },
    {
      name: "Box5",
      link: "../images/boxes.JPG",
    },
]


const elementTemplate = document.querySelector('#card-template').content;
const elementPlace = document.querySelector('.elements__list');
const cardElement = elementTemplate.querySelector('.elements__card').cloneNode(true);


function createCard(link, name) {
    cardElement.querySelector('.elements__image').src = link;
    cardElement.querySelector('.elements__name').textContent = name;
    cardElement.querySelector('.elements__image').alt = name;

    const chooseButton = cardElement.querySelector('.elements__button'); 
    chooseButton.addEventListener('click', chooseCard);

    return cardElement;
    };


function chooseCard() {
    return console.log("Good")
}

boxesImages.forEach(function({ link, name }) {
    const cardNew = createCard(link, name);
    elementPlace.append(cardNew);
    console.log(cardNew);
    console.log("cardNew")
    });

<!DOCTYPE html>


<body class="body">

    <section class="elements" aria-label="Карточки товара">
      <ul class="elements__list">
      </ul>
    </section>

  <template id="card-template">
    <li class="elements__card">
      <h2 class="elements__name"></h2>
      <img class="elements__image" src="" alt="" />
      <!-- <button type="button" class="elements__heart"></button> -->
      <button type="button" class="elements__button">ВЫБРАТЬ</button>
    </li>
  </template>

</body>

</html>

Answer 1

Всё довольно просто: вы в методе createCard не создаёте чего-то нового, а просто используете существующее.

Нужно либо создавать теги динамически через createElement и добавлять в них классы и прочие атрибуты, либо элементы, которые были взяты через querySelector вначале клонировать в коде, и вот в эти клонированные элементы добавлять данные.

Возможно, раз уж вы используете template, нужно клонировать его и работать с элементами клонированного темплейта, типа такого:

let template = document.querySelector('template').content.cloneNode(true); // или возможно так: let content = document.querySelector('template').content ???
template.querySelector('.elements__image').src = link;
template.querySelector('.elements__name').textContent = name;
template.querySelector('.elements__image').alt = name;
...

Т.е. это нужно делать внутри метода createCard, а не вне его. Т.к. происходит изменение одного и того же элемента

БЛОГ НА HUSL

Вывод на экран карточек с помощью методов forEach и append(). Новая карточка затирает предыдущую

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