0
//Переменные и константы
const popupProfile = document.querySelector('#popup-profile');
const popupPhoto = document.querySelector('.popup-photo');
const profileEditButton = document.querySelector('.profile__edit-button');
const popupCloseButton = document.querySelector('.popup__close-button');
const profileName = document.querySelector('.profile__name');
const profileParagraph = document.querySelector('.profile__paragraph');
const formName = document.querySelector('#profile__name');
const formParagraph = document.querySelector('#profile__paragraph');
const form = document.querySelector('#form');

const profileAddButton = document.querySelector('.profile__add-button');
const photoPopupCloseButton = document.querySelector('#close-Btn');
const formButton = document.querySelector('#button-form');
const cardsOpenPopup = document.querySelector('.popup_open-card');
const imagePopup = document.querySelector('.popup__image');
const captionPopup = document.querySelector('.popup__caption');

const elementsContain = document.querySelector('.elements__contain');
const elementCardTemplate = document.querySelector('#elements-card').content;
const photoCloseButton = document.querySelector('#Close-card');

// Функции

//функция открытия попапа редактирования профайла
function openPopupForm(item) {
    addClassOpened(item);//открытие попапа
    formName.value = profileName.textContent;
    formParagraph.value = profileParagraph.textContent;
}

//функция открытия попапа добавления фото
function openPopupImage(item, image) {
    addClassOpened(item);
    imagePopup.src = image.src;
    imagePopup.alt = image.alt;
    captionPopup.textContent = image.alt;
}

//функция открытия попапа
function addClassOpened(item) {
    item.classList.add('popup_opened');
    **item.addEventListener('click', detectClickOutside);
    item.addEventListener('click', handlePopupCloseEsc);**
}

//функция закрытия попапа
function closePopup(item) {
    item.classList.remove('popup_opened');
    **item.removeEventListener('click', detectClickOutside);
    item.removeEventListener('click', handlePopupCloseEsc);**
}

**//данная функция закрытия попапа по клику вне его не работает-нужно исправить**
function detectClickOutside(evt) {
    if (evt.target === evt.currentTarget) {
        closePopup(evt);
    }
}

**//данная функция так же не работает по нажатию на кнопку Esc-попап(форма не закрывается)**
function handlePopupCloseEsc(evt) {
    if (evt.key === 'Escape') {
        const openedPopup = document.querySelector('.popup_opened');
        if(openedPopup) {
            openedPopup.classList.remove('popup_opened');
        }
    }
}

//функция закрытия попапа редактирования профайла
function formSubmitHandler(evt) {
    //предотвращает обновление страницы
    evt.preventDefault();
    profileName.textContent = formName.value;
    profileParagraph.textContent = formParagraph.value;

    closePopup(popupProfile);
}

/*
Функция добавления карточки разделена на две функции createCard return card и renderCard
 */
function addCard(link, name) {
    const card = createCard(link, name); // Создает по шаблону карточку
    renderCard(card); // Добавляет в начало элемента elementsContain созданую карточку
}

function createCard(link, name) {
    const card = elementCardTemplate.querySelector('.elements__block').cloneNode(true);
    const cardImage = card.querySelector('.elements__image');
    const cardName = card.querySelector('.elements__name');
    cardImage.src = link;
    cardImage.alt = name;
    cardName.textContent = name;
    cardImage.addEventListener('click', card);

    card.querySelector('.elements__button-like').addEventListener('click', buttonLike);
    card.querySelector('.elements__button-delete').addEventListener('click', deleteCard);
    card.querySelector('.photo__open-button').addEventListener('click', () => openPopupImage(cardsOpenPopup, cardImage));
    // Добавлен обработчик событий для картинки. При клике на картинку вызывается функция openPopupImage и открывает popup с картинкой
    return card;
}

function renderCard(card) {
    elementsContain.prepend(card);
}

// Бизнес логика
// Создание карточек происходит после загрузки страницы
window.onload = function () {
    for (let i = 0; i < initialCards.length; i++) {
        addCard(initialCards[i].link, initialCards[i].name);
    }
};

// Обработчики событий
form.addEventListener('submit', formSubmitHandler);
profileEditButton.addEventListener('click', () => { openPopupForm(popupProfile) });
popupCloseButton.addEventListener('click', () => { closePopup(popupProfile) });
profileAddButton.addEventListener('click', () => openPopupForm(popupPhoto));
photoPopupCloseButton.addEventListener('click', () => closePopup(popupPhoto));
formButton.addEventListener('submit', formPlaceSubmitHandler);
photoCloseButton.addEventListener('click', () => { closePopup(cardsOpenPopup) });
1
  • А где вы вешаете слушатель keydown для закрытия по ESC? 12 июн 2022 в 10:29

1 ответ 1

0

исправила код, насколько он правильно написан не могу сказать, но оно работает и в консоле ошибок нет:

/функция открытия попапа
function addClassOpened(item) {
    item.classList.add('popup_opened');
    item.addEventListener('click', detectClickOverlay);

}

//функция закрытия попапа
function closePopup(item) {
    item.classList.remove('popup_opened');
    item.removeEventListener('click', detectClickOverlay);

}

function detectClickOverlay(evt) {
    if (evt.target === evt.currentTarget) {
        const openedPopup = document.querySelector('.popup_opened');
        if (openedPopup) {
            openedPopup.classList.remove('popup_opened');
        }
    }
}

function handlePopupCloseEsc(evt) {
    if (evt.key === 'Escape') {
        const openedPopup = document.querySelector('.popup_opened');
        if (openedPopup) {
            openedPopup.classList.remove('popup_opened');
        }
    }
}  

document.addEventListener('keyup', handlePopupCloseEsc);

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.