Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.05.2020, 13:37
Интересующийся
Отправить личное сообщение для knoxville88 Посмотреть профиль Найти все сообщения от knoxville88
 
Регистрация: 08.04.2020
Сообщений: 14

Работа с формой
Всем привет! Не могу доделать до конца задачку с формой: при отправке заполненной формы должна появляться карточка.

function addCard (name, link) {

  const placesList = document.querySelector('.places-list');
  const placeCard = document.createElement('div');
  const placeImg = document.createElement('div');
  const placeImgLink = 'background-image: url(' + link + ')';
  const placeBtnDel =  document.createElement('button');
  const placeDescription = document.createElement('div');
  const placeName = document.createElement('h3');
  const placeBtnLike =  document.createElement('button');
  

  placeCard.classList.add('place-card');
  placeImg.classList.add('place-card__image');
  placeBtnDel.classList.add('place-card__delete-icon');
  placeDescription.classList.add('place-card__description');
  placeName.classList.add('place-card__name');
  placeBtnLike.classList.add('place-card__like-icon');

  placesList.appendChild(placeCard);
  placeCard.appendChild(placeImg);
  placeImg.appendChild(placeBtnDel);
  placeCard.appendChild(placeDescription);
  placeDescription.appendChild(placeName);
  placeDescription.appendChild(placeBtnLike);

  placeImg.setAttribute('style', placeImgLink);
  
  placeName.textContent = name;

  placeBtnDel.addEventListener('click', function(event) {
    placesList.removeChild(placeCard);
  });
  placeBtnLike.addEventListener('click', function(event) {
    placeBtnLike.classList.toggle('place-card__like-icon_liked')
  });
}; 
  
for (let i = 0; i < 10; i++) {
const name = initialCards[i]['name'];
const link = initialCards[i]['link'];
addCard(name, link);
};

const form = document.querySelector('.popup');
const openForm = document.querySelector('.user-info__button');
const closeForm = document.querySelectorAll('.popup__close');
const addBtn = document.querySelector('.popup__button')

function openCloseForm(event) {
    if (event.target.matches('.user-info__button')) {
      form.classList.add("popup_is-opened");
    } 
    else if (event.target.matches('.popup .popup__close')) {
      form.classList.remove("popup_is-opened");
    }
  };
openForm.addEventListener("click", openCloseForm);
closeForm.forEach(btn => btn.addEventListener("click", openCloseForm));
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
JS работа с HTML формой Artem19981 jQuery 4 18.01.2018 00:13
Вакансия: Программист IOS, работа в офисе,г.Ростов-на-Дону Анна NikitaOnline Работа 0 21.03.2016 17:45
работа с формой ??? Общие вопросы Javascript 3 19.06.2012 18:01
Работа с "динамической" формой. lolka84 Элементы интерфейса 4 27.10.2010 07:43