Как используя функцию `render_card`, вывести все карточки из массива на страницу в элемент?

Question

К странице подключен массив карточек initialCards, а в вёрстке для вывода карточек подготовлен шаблон #card-template.

const initialCards = [
    {
      name: "Архыз",
      link: "https://pictures.s3.yandex.net/frontend-developer/cards-compressed/arkhyz.jpg",
    },
    {
      name: "Челябинская область",
      link: "https://pictures.s3.yandex.net/frontend-developer/cards-compressed/chelyabinsk-oblast.jpg",
    },
    {
      name: "Иваново",
      link: "https://pictures.s3.yandex.net/frontend-developer/cards-compressed/ivanovo.jpg",
    },
    {
      name: "Камчатка",
      link: "https://pictures.s3.yandex.net/frontend-developer/cards-compressed/kamchatka.jpg",
    },
    {
      name: "Холмогорский район",
      link: "https://pictures.s3.yandex.net/frontend-developer/cards-compressed/kholmogorsky-rayon.jpg",
    },
    {
      name: "Байкал",
      link: "https://pictures.s3.yandex.net/frontend-developer/cards-compressed/baikal.jpg",
    }
];

<!-- TEMPLATE -->
    <template id="card-template">
      <li class="places__item card">
        <img class="card__image" src="" alt="" />
        <button type="button" class="card__delete-button"></button>
        <div class="card__description">
          <h2 class="card__title"></h2>
          <button type="button" class="card__like-button"></button>
        </div>
      </li>
    </template>

Мне необходимо используя полученную функцию, вывести все карточки из массива на страницу в элемент .places__list

// Объявили переменную, куда выведем готовые карточки
const placesList = document.querySelector(".places__list");

function renderCard({ name, link }) {
  // Скопировали шаблон

  const cardTemplate = document.querySelector("#card-template").content;
  const cardElement = cardTemplate
    .querySelector(".places__item")
    .cloneNode(true);

  // Установили значения вложенных элементов
  cardElement.querySelector(".card__title").textContent = name;
  cardElement.querySelector(".card__image").src = link;
  cardElement.setAttribute("alt", name);

  // Обработчик клика, по которому будет вызван переданный в аргументах колбэк (функция).
  const deleteButton = cardElement.querySelector(".card__delete-button");
  deleteButton.addEventListener("click", deleteCard);
}

// Функция удаления
function deleteCard() {
  const cards = this.parentElement;
  cards.remove();
}


initialCards.forEach(renderCard, deleteCard);
placesList.append(cardElement);

<!-- СЕКЦИЯ С КАРТОЧКАМИ -->
        <section class="places page__section">
          <ul class="places__list"></ul>
        </section>

Я так понимаю, что для этого нужно placesList.append(cardElement) прописать в новой функции или глобально

Проблема в том, что cardElement расположен локально в функции renderCard()

Следовательно, консоль выдает ошибку:

Uncaught ReferenceError: cardElement is not defined

В связи с вышеизложенным прошу знатоков помочь в следующем:

Функция renderCard() должна принимать в аргументах данные одной карточки и колбэк-функцию для удаления (это я выполнила), а возвращать подготовленный к выводу элемент карточки

Не понимаю как это реализовать

Как, используя полученную функцию, вывести все карточки из массива на страницу в элемент .places__list.?

Вариант добавить placesList.append(cardElement) в функцию renderCard() не подходит

Answer 1

Вам необходимо из функции renderCard возвращать созданную карточку(дописать последней строкой)

return cardElement;

Так же, для применения этой функции к каждому элементу массива, лучше использовать метод map(), а уже потом forEach()

initialCards // Массив с данными
  .map(renderCard) // Преобразуем в массив элементов
  .forEach(el => placesList.append(el)); // каждый элемент добавляем в контейнер

Полный пример кода:

const initialCards = [{
    name: "Архыз",
    link: "https://pictures.s3.yandex.net/frontend-developer/cards-compressed/arkhyz.jpg",
  },
  {
    name: "Челябинская область",
    link: "https://pictures.s3.yandex.net/frontend-developer/cards-compressed/chelyabinsk-oblast.jpg",
  },
  {
    name: "Иваново",
    link: "https://pictures.s3.yandex.net/frontend-developer/cards-compressed/ivanovo.jpg",
  },
  {
    name: "Камчатка",
    link: "https://pictures.s3.yandex.net/frontend-developer/cards-compressed/kamchatka.jpg",
  },
  {
    name: "Холмогорский район",
    link: "https://pictures.s3.yandex.net/frontend-developer/cards-compressed/kholmogorsky-rayon.jpg",
  },
  {
    name: "Байкал",
    link: "https://pictures.s3.yandex.net/frontend-developer/cards-compressed/baikal.jpg",
  }
];

// Объявили переменную, куда выведем готовые карточки
const placesList = document.querySelector(".places__list");

function renderCard({
  name,
  link
}) {
  // Скопировали шаблон

  const cardTemplate = document.querySelector("#card-template").content;
  const cardElement = cardTemplate
    .querySelector(".places__item")
    .cloneNode(true);

  // Установили значения вложенных элементов
  cardElement.querySelector(".card__title").textContent = name;
  cardElement.querySelector(".card__image").src = link;
  cardElement.setAttribute("alt", name);

  // Обработчик клика, по которому будет вызван переданный в аргументах колбэк (функция).
  const deleteButton = cardElement.querySelector(".card__delete-button");
  deleteButton.addEventListener("click", deleteCard);
  return cardElement;
}

// Функция удаления
function deleteCard() {
  const cards = this.parentElement;
  cards.remove();
}


initialCards.map(renderCard).forEach(el => placesList.append(el));

<!-- СЕКЦИЯ С КАРТОЧКАМИ -->
<section class="places page__section">
  <ul class="places__list"></ul>
</section>

<!-- TEMPLATE -->
<template id="card-template">
  <li class="places__item card">
    <img class="card__image" src="" alt="" />
    <button type="button" class="card__delete-button">Удалить</button>
    <div class="card__description">
      <h2 class="card__title"></h2>
      <button type="button" class="card__like-button">Лайк</button>
    </div>
  </li>
</template>

БЛОГ НА HUSL

Как используя функцию `render_card`, вывести все карточки из массива на страницу в элемент?

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