Почему выдает ошибку?

Question

[RLYamakasi]

кучу всего перепробовал. по задумке скрипт создает 5 карточек при старте страницы

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


   for (i = 0; i < initialCards.length; i = i + 1){
    let element = blockTemplate.querySelector('.element').cloneNode(true);
    let element__img = document.querySelector('.element__image');  
    element__img.src = initialCards[i].link;
    element.querySelector('.element__text').textContent = initialCards[i].name;
    console.log(i)
   }

ошибка:Uncaught TypeError: Cannot set properties of null (setting 'src')
at cards.js:33:22

Comments

[d-sem]

ошибка то какая

[Danny Arty]

d-sem, это загадка. Ошибку надо угадать

[Сергей Сергей]

d-sem, Danny Arty, "свойство не определено для null" я полагаю.

Answer 1

[Anonymous]

Здравствуйте. Вижу вы учусь в Яндекс Практикуме, я там учился, узнаю задания)))
Нужно создать 3 функции, одна функция создает карточку, другая выводит ее, а последняя перебирает массив.
Мой код вот такой:

function createCard(item) {
    const card = document.querySelector("#template-card").content.querySelector('.card').cloneNode(true);
    const title = card.querySelector(".card__title");
    const image = card.querySelector('.card__image');

    title.textContent = item.title;
    image.src = item.image;

    return card; // возвращаем результат функции
}

function addCard(item, container) {
    const card = createCard(item); // Вызываем функцию создания карточек
    container.append(card); // Выводим карточку. 
}

cardData.forEach((item) => { // перебираем массив
    const cards = document.querySelector('.cards');
    addCard(item, cards); // вызываем и передаем значения функции addCard
});

P.S. Почему вы задаете вопрос на Хабр, а не наставнику?

Comments

[RLYamakasi]

спасибо)

[Anonymous]

RLYamakasi, и дам небольшую подсказку на будущее - вам нужно в функцию createCard писать функцию для кнопки удаления карточки, лайка, и попапа(жмете на картинку и появляется большое изображение на мониторе). Здесь я их удалил, потому что лучше учится самим, а не копипастить чужой код всегда

[RLYamakasi]

Никита Савченко, мне просто иногда не приятно беспокоить их по мелочам и я обращаюсь сюда

[Anonymous]

RLYamakasi, ясно. Удачи вам!))