Как добавить действия новым создаваемым карточкам?

Question

[Евгения Федотова]

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

const renderCard = (cards) => {
  cardsContainer.prepend(createCard(cards));
};

popupFormTypePlace.addEventListener('submit', (evt) => {
  evt.preventDefault();

  renderCard({
    name: popupInputTypePlace.value,
    link: popupInputTypeLink.value,
  });

  evt.target.reset();
  closePopup(popupTypePlace);
});

const createCard = (cards) => {
  const newCard = cardsTemplate.cloneNode(true);
  const cardName = newCard.querySelector('.element__title');
  const cardImage = newCard.querySelector('.element__item');
  cardName.textContent = cards.name;
  cardImage.setAttribute('src', cards.link);
  cardImage.setAttribute('alt', cards.link);
  return newCard
};

initialCards.forEach((cards) => {
  const newCard = createCard(cards)
  cardsContainer.append(newCard)
});

const likeButtons = document.querySelectorAll('.element__button');
likeButtons.forEach((likeButton) => {
  likeButton.addEventListener('click', toggleLike);
});

function toggleLike(evt) {
  evt.target.classList.toggle('element__button_active');
};

const deleteButtons = document.querySelectorAll('.element__basket');
deleteButtons.forEach((deleteButton) => {
  deleteButton.addEventListener('click', elementDelete);
})
function elementDelete(evt) {
  evt.target.closest('.element').remove();
};

const cardPictures = document.querySelectorAll('.element__item');
cardPictures.forEach((cardPicture) => {
  cardPicture.addEventListener('click', openPicture);
})
function openPicture(evt) {
  openPopup(popupTypePicture);
  const imageSrc = evt.target.getAttribute('src');
  const imageAlt = evt.target.getAttribute('alt');
  const card = evt.target.closest('.element');
  const imageTitle = card.querySelector('.element__title').textContent;

  const popupPicture = popupTypePicture.querySelector('.popup__picture');
  const popupName = popupTypePicture.querySelector('.popup__name');

  popupPicture.src = imageSrc;
  popupPicture.alt = imageAlt;
  popupName.textContent = imageTitle;
};

Comments

[HardBot]

Так же, как и писал его. Код свой прилаживать не учили или люди должны гадать?

[Александр]

Используйте делегирование событий.

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

Правила 3.6

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

...

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

[Евгения Федотова]

HardBot, прошу прощения. не судите строго, я новичок тут.
Прикладываю код.

const renderCard = (cards) => {
cardsContainer.prepend(createCard(cards));
};

popupFormTypePlace.addEventListener('submit', (evt) => {
evt.preventDefault();

renderCard({
name: popupInputTypePlace.value,
link: popupInputTypeLink.value,
});

evt.target.reset();
closePopup(popupTypePlace);
});

const createCard = (cards) => {
const newCard = cardsTemplate.cloneNode(true);
const cardName = newCard.querySelector('.element__title');
const cardImage = newCard.querySelector('.element__item');
cardName.textContent = cards.name;
cardImage.setAttribute('src', cards.link);
cardImage.setAttribute('alt', cards.link);
return newCard
};

initialCards.forEach((cards) => {
const newCard = createCard(cards)
cardsContainer.append(newCard)
});

const likeButtons = document.querySelectorAll('.element__button');
likeButtons.forEach((likeButton) => {
likeButton.addEventListener('click', toggleLike);
});

function toggleLike (evt) {
evt.target.classList.toggle('element__button_active');
};

const deleteButtons = document.querySelectorAll('.element__basket');
deleteButtons.forEach((deleteButton) => {
deleteButton.addEventListener('click', elementDelete);
})
function elementDelete (evt) {
evt.target.closest('.element').remove();
};

const cardPictures = document.querySelectorAll('.element__item');
cardPictures.forEach((cardPicture) => {
cardPicture.addEventListener('click', openPicture);
})
function openPicture (evt) {
openPopup(popupTypePicture);
const imageSrc = evt.target.getAttribute('src');
const imageAlt = evt.target.getAttribute('alt');
const card = evt.target.closest('.element');
const imageTitle = card.querySelector('.element__title').textContent;

const popupPicture = popupTypePicture.querySelector('.popup__picture');
const popupName = popupTypePicture.querySelector('.popup__name');

popupPicture.src = imageSrc;
popupPicture.alt = imageAlt;
popupName.textContent = imageTitle;
};

Answer 1

[Noder SS]

Действие удалять, лайкать повесьте на один класс через forEach, а новой карточке добавляйте этот класс. Если нужно, могу сверстать пример иди попробовать отредачить готовый код

Comments

[Евгения Федотова]

Делала через forEach. Прикладываю код.

const renderCard = (cards) => {
cardsContainer.prepend(createCard(cards));
};

popupFormTypePlace.addEventListener('submit', (evt) => {
evt.preventDefault();

renderCard({
name: popupInputTypePlace.value,
link: popupInputTypeLink.value,
});

evt.target.reset();
closePopup(popupTypePlace);
});

const createCard = (cards) => {
const newCard = cardsTemplate.cloneNode(true);
const cardName = newCard.querySelector('.element__title');
const cardImage = newCard.querySelector('.element__item');
cardName.textContent = cards.name;
cardImage.setAttribute('src', cards.link);
cardImage.setAttribute('alt', cards.link);
return newCard
};

initialCards.forEach((cards) => {
const newCard = createCard(cards)
cardsContainer.append(newCard)
});

const likeButtons = document.querySelectorAll('.element__button');
likeButtons.forEach((likeButton) => {
likeButton.addEventListener('click', toggleLike);
});

function toggleLike (evt) {
evt.target.classList.toggle('element__button_active');
};

const deleteButtons = document.querySelectorAll('.element__basket');
deleteButtons.forEach((deleteButton) => {
deleteButton.addEventListener('click', elementDelete);
})
function elementDelete (evt) {
evt.target.closest('.element').remove();
};

const cardPictures = document.querySelectorAll('.element__item');
cardPictures.forEach((cardPicture) => {
cardPicture.addEventListener('click', openPicture);
})
function openPicture (evt) {
openPopup(popupTypePicture);
const imageSrc = evt.target.getAttribute('src');
const imageAlt = evt.target.getAttribute('alt');
const card = evt.target.closest('.element');
const imageTitle = card.querySelector('.element__title').textContent;

const popupPicture = popupTypePicture.querySelector('.popup__picture');
const popupName = popupTypePicture.querySelector('.popup__name');

popupPicture.src = imageSrc;
popupPicture.alt = imageAlt;
popupName.textContent = imageTitle;
};

[Noder SS]

Евгения Федотова, а зачем везде константы? Он же из-за этого и не применяется, ведь константы невозможно изменить. залейте код на кодепен, если не сложно

[Евгения Федотова]

Я только учусь, так сложно разобраться. Уже обрадовалось,что все работает, а тут на новые карточки никаких реакций((
https://codepen.io/eevgenushka/pen/KKxMzoP

[Noder SS]

Евгения Федотова, Можете еще html добавить?

[Евгения Федотова]

https://codepen.io/eevgenushka/pen/KKxMzoP

Answer 2

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

Как исправить готовый код?

Код надо привести в вопросе, окружив тегом <code>

Сейчас у вас создаются 6 компонентов и тут же вешаются на них слушатели событий. См. все моменты с addEventListener('click', ...

Когда создаётся вдруг новый ещё один компонент, на его суб-элементы слушателей клика уже никто не вешает, поэтому «действия» и не работают.

Лучший вариант решения – слушать событие click выше, на общем родителе всех этих карточек – cardsContainer. Всего один слушатель. В обработчике разбирать, по кому, собственно, кликнули: смотреть класс кликнутого элемента и искать ближайшую к нему карточку.

Так будут обработаны все карточки внутри этого общего родителя.

spoiler

cardsContainer.addEventListener('click', ({ target }) => {
  if (target.classList.contains('element__button')) {
    // toggle Like
    target.classList.toggle('element__button_active');   
  } else if (target.classList.contains('element__basket')) {
    // delete
    target.closest('.element').remove();
  } else if (target.classList.contains('element__item')) {
    // open picture
    openPicture({ target });
  }
});
// и убрать всё ставшее ненужным