Сохранить данные из всплывающего окна редактирования - PullRequest
Новая
       27

Сохранить данные из всплывающего окна редактирования

0 голосов
/ 09 апреля 2020

У меня есть всплывающий раздел с двумя входами для стоимости акций. Мой ожидаемый результат - напечатанное имя и описание должны появиться в разделе профиля после сохранения.

Я хочу использовать только собственный JS, а идентификатор ограничен.

Проблема заключается в следующем - даже если я что-то печатаю во входных данных формы, значения input.values ​​остаются такими же, как определено в HTML. 

    <section class="profile">
      <div class="profile__info">
        <img class="profile__avatar" src='./images/Cousteau.png' alt='Profile Image'>
        <div class="profile__data">
          <p class="profile__name">Name</p>
          <p class="profile__description">Description</p>
        </div>
        <button class="profile__edit-button"></button>
      </div>
      <button class="profile__add-button"></button>
    </section>


    <section class="popup popup_status_is-closed">
      <div class="popup__content">
        <button class="popup__close-button"></button>
        <h3 class="popup__title">Edit</h3>
        <form class="popup__form">
          <input class="popup__input popup__input_type_name" name="name" type="text" required minlength="2" maxlength="25" value="Name">
          <input class="popup__input popup__input_type_description" name="description" type="text" required minlength="2" maxlength="35" value="Description">
          <button class="popup__button" id="submit" type="submit">Save</button>
        </form>
      </div>
    </section>

JS

    function formSubmitHandler(evt) {
      evt.preventDefault();

      const nameInput = popUp.querySelector('.popup__input_type_name');
      const descrInput = popUp.querySelector('.popup__input_type_description');
      const profileName = profile.querySelector('.profile__name');
      const profileDescr = profile.querySelector('.profile__description');

      nameInput.value = profileName.textContent;
      descrInput.value = profileDescr.textContent;

      closeEditForm();
    };

    saveButton.addEventListener('click', formSubmitHandler);
    formElement.addEventListener('submit', formSubmitHandler);

1 Ответ

1 голос
/ 09 апреля 2020

Я думаю, что есть ряд проблем с вашим кодом.

1) Ваше задание неверно - то есть nameInput.value = profileName.textContent должно быть profileName.textContent = nameInput.value

2) Ваш селекторы ошибочны - вы хотите выбрать из document, а не из неопределенного popUp, profile, и т. д. c

3) Ваш обработчик неверен - вам нужно добавить обработчик события в кнопка отправки

4) Я могу ошибаться, но я думаю, что ваши входы должны иметь placeholder, а не value - то есть Name и Description просто для идентификации типа ввода ...

Имея все это в виду - я внес некоторые изменения, и это должно работать как положено 

function qs(selector) {
  return document.querySelector(selector);
}

function formSubmitHandler(evt) {
  evt.preventDefault();
  qs('.profile__name').textContent = qs('.popup__input_type_name').value;
  qs('.profile__description').textContent = qs('.popup__input_type_description').value;
  closeEditForm();
}

function closeEditForm() {}

document.getElementById('submit').addEventListener('click', formSubmitHandler);
 <section class="profile">
   <div class="profile__info">
     <img class="profile__avatar" src='./images/Cousteau.png' alt='Profile Image'>
     <div class="profile__data">
       <p class="profile__name">Name</p>
       <p class="profile__description">Description</p>
     </div>
     <button class="profile__edit-button"></button>
   </div>
   <button class="profile__add-button"></button>
 </section>


 <section class="popup popup_status_is-closed">
   <div class="popup__content">
     <button class="popup__close-button"></button>
     <h3 class="popup__title">Edit</h3>
     <form class="popup__form">
       <input class="popup__input popup__input_type_name" name="name" type="text" required minlength="2" maxlength="25" placeholder="Name">
       <input class="popup__input popup__input_type_description" name="description" type="text" required minlength="2" maxlength="35" placeholder="Description">
       <button class="popup__button" id="submit" type="submit">Save</button>
     </form>
   </div>
 </section>
...