Создает пустой блок. И при нажатии на element__image изображение и текст передавались в #popup_photo. Как надо сделать?

Question

[Ww228wW]

При нажатии popup__form-submit_add создает пустой блок(при пустых значениях чтобы ничего не создавал) . И при нажатии на element__image изображение и текст element передавались в #popup_photo. Не могу написать, буду рад помощи

Answer 1

[Олег Колесников]

Чтобы не создавался пустой блок

function addCard(titleValue, linkValue) {
    if(titleValue && linkValue) {
          const inpTemplate = document.querySelector("#element").content;
          const inpElement = inpTemplate.querySelector(".element").cloneNode(true);
          Container.prepend(inpElement);
          inpElement.querySelector(".element__title").textContent = titleValue;
          inpElement.querySelector(".element__image").src = linkValue;
    }
}

И при нажатии на element__image изображение и текст element передавались в #popup_photo

для этого есть event.target - стандартный параметр для функции, которая вызывается колбэком у addEventListener

Что то в этом роде, учитывая что все слушатели уже есть

const popImg= document.querySelector("#popup_image"); 
const Img= document.querySelector(".popup__image"); 
const Disc = document.querySelector(".popup__discription");

function openPopupImage(e) {
  Img.src = e.target.src;
  // для простоты примера, берем данные из атрибута alt, предполагается что он заполнен
  Img.alt = e.target.alt: 
  Disc .textContent = e.target.alt;
  openPopup(popImg); // передаём весь попап, для смены класса в будущем
};

function openPopup(popup) {
  popup.classList.add("popup_opened");
}

Comments

[Ww228wW]

Попробовал не получилось , карточки пустые добавляет , значения не передает

[Олег Колесников]

Ww228wW, Потому что у Вас две одинаковых функции addCard, уберите лишнее и всё заработает.
По поводу передачи значения, написал для образца, как это может быть, а не по принципу копировать вставить.

У вас на Codepen куча кода, который не относится к вопросу, думаю если бы Вы убрали все лишнее, то получили бы ответ гораздо быстрее

[Ww228wW]

Простите , за код . Пустой блок не создает(1 вопрос решен). А с передачей значений не вышло. Понятное дело что Ctr + с , Сtr + v не решит
.

[Олег Колесников]

Вот тут всё, что нужно для решения второго вопроса
А в Codepen куча ошибок, посмотрите в консоль...

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

const elems = document.querySelector(".elements");
const Template = document.querySelector("#element").content;
initialCards.forEach((item) => renderCard(item));

function renderCard({ name, link }) {
  const Element = Template.querySelector(".element").cloneNode(true);
  Element.querySelector(".element__title").textContent = name;
  Element.querySelector(".element__image").src = link;
  Element.addEventListener("click", openPopupImage); // слушатель вешается при создании карточек
  elems.prepend(Element);
}

const popImg= document.querySelector('#popup_photo'); 

function openPopupImage(e) {
  openPopup(popImg);
  console.log(e.target.src, e.target.alt)
  
};

function openPopup(popup) {	
  console.log(popup);
  popup.classList.add("popup_opened");
}

Так же логично использовать функцию renderCard для создания карточки через кнопку сохранить

[Ww228wW]

Олег Колесников, Спасибо вам огромное, простите за криво предоставленную информацию, первый раз задаю вопрос. Все работает, мне осталось передать alt и все.

[Олег Колесников]

Пожалуйста, отметьте ответ решением в таком случае