从编辑弹出窗口保存数据

Question

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

我只想使用原生JS，并且id受到限制。

问题如下——即使我以inputs的形式键入一些内容，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>