从编辑弹出窗口保存数据

Question

我有一个弹出部分，其中有两个用于输入股票价值的输入。保存后，我的预期结果–输入的名称和描述应显示在配置文件部分。

我只想使用本机JS，并且ID受限制。

此问题随之而来-即使我在表单输入中键入内容，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);

Answer 1

我认为您的代码存在许多问题。

1）您的分配方式有误-即nameInput.value = profileName.textContent应该为profileName.textContent = nameInput.value

2）您的选择器错误-您要从document中进行选择，而不要从未定义的popUp，profile等中进行选择>

3）您的处理程序有误-您需要将事件处理程序添加到“提交”按钮中

牢记所有这些-我做了一些更改，这应该可以按预期进行

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>