Как добавить массив на страницу?

Question

[ceo444]

Всем привет! Хочу чтобы при загрузке страницы тут отображался массив элементов. Добавить его нужно в переменную elements, чтобы title.textContent попадало значение name из массива, а link в photo.src. Всего должно получиться 6 карточек.

const photo = document.createElement('img');
photo.classList.add('element__image');
const container = document.createElement('div')
container.classList.add('element__container');
const title = document.createElement('h2');
title.classList.add('element__title');
const likeButton = document.createElement('button');
likeButton.classList.add('element__like-button');
const element = document.createElement('article');
element.classList.add('element');
const deleteButton = document.createElement('button');
deleteButton.classList.add('element__delete-button');
const elements = document.querySelector(".elements");

deleteButton.addEventListener('click', function() {
    element.remove();
});

likeButton.addEventListener('click', function() {
    likeButton.classList.add('element__like-button_active');
});

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'
    }
];

photo.src = initialCards.link;
title.textContent = initialCards.name;

elements.append(initialCards);

function photoAddFunc(evt) {
    evt.preventDefault();
    container.append(title, likeButton);
    element.append(photo, deleteButton, container);
    elements.prepend(element);
    photo.src = photoInput.value;
    title.textContent = titleInput.value;
    closeAdd()
}

formAddElement.addEventListener('submit', photoAddFunc);

Answer 1

[wonderingpeanut]

Проходишься по массиву (через forEach или цикл), для каждого элемента делаешь

const title = document.createElement('div') // тайтл
div.textContent = el.name
const img = document.createElement('img') // картинка
img.src = el.src;
const card = document.createElement('div'); // контейнер для тайтла и картинки
card.append(title)
card.append(img)
container.append(card) // родитель в который будет добавлена карточка с тайтлом и картинкой

Comments

[ceo444]

Не совсем понимаю как через forEach сделать, можешь пожалуйста по подробнее описать, и еще там помимо тайтла, фото и самой карточки есть 2 кнопки + на них нужно повесить классы. Я закинул все в зип, чтобы было проще понять что требуется. Внешний вид 6 карточек там в index.html закоментирован. Заранее спасибо за уделенное время!

https://dropmefiles.com/U4wPM

[wonderingpeanut]

ceo444, у тебя есть массив initialCards. Ты хочешь создать карточки следующей структуры

<article class="element">
  <img class="element__image" src="./images/elbrus.jpg" alt="Гора Эльбрус">
  <button type="button" class="element__delete-button"></button>
  <div class="element__container">
    <h2 class="element__title">Гора Эльбрус</h2>
    <button type="button" class="element__like-button"></button>
  </div>
</article>

для каждого элемента массива.
Проходишься по массиву с помощью forEach или обычным for циклом и для каждого элемента массива создаешь article, в котором будут изображение, кнопка и div с двумя элементами - хедингом и кнопкой, в конце добавляешь созданный article в контейнер с классом elements

Answer 2

[Сергей Соколов]

раз есть массив, и для каждого элемента нужно получить на выходе карточку, нужна функция:
на вход элемент массива, на выходе – карточка.

И тогда

initialCards.forEach(item => {
  // создать карточку
  const element = makeElementFromItem(item);

  // установить эту карточку куда-то в DOM-дереве
  document.body.appendChild(element);
});

Вам осталось реализовать функцию makeElementFromItem() — но там в начале у вас уже есть все эти createElement() – думаю, вы справитесь.