javascript - 从编辑弹出窗口保存数据

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) 您的处理程序错误 - 您需要将事件处理程序添加到提交按钮

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>