从编辑弹出窗口保存数据

Question

I have a popup section with two inputs for stock values. My Expected result – typed name and description should show up in the profile section after saving.

I only want to use native JS and the id is restricted.

The issue is following - even if I type something in form inputs, input.values remain the same as defined in the 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

I think there are a number of issues with your code.

1) You have your assignment the wrong way around - ie nameInput.value = profileName.textContent should be profileName.textContent = nameInput.value

2) Your selectors are wrong - you want to select from document not from the undefined popUp , profile , etc

3) Your handler is wrong - you need to add the event handler to the submit button

4) I could be wrong but I think your inputs should have placeholder rather than value - that is Name and Description are simply to identify the type of input...

With all that in mind - I made some changes and this should be working as expected

 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>