Есть список постов, который генерится вот так:
async function getPosts() {
let res = await fetch('./api/posts');
let posts = await res.json();
const postList = document.querySelector('.post-list');
postList.innerHTML = '';
posts.forEach((post) => {
postList.innerHTML += `
<div class="card col-lg-4 col-sm-6 bg-light">
<div class="card-body ">
<h5 class="card-title">${post.title}</h5>
<p class="card-text">${post.body}</p>
<a href="#" class="card-link">Подробнее...</a>
<a href="#" class="card-link" onclick="removePost(${post.id})">Удалить</a>
<a href="#" class="card-link" onclick="selectPost('${post.id}', '${post.title}', '${post.body}')">Редактировать</a>
</div>
</div>
`
});
}
getPosts();
Вот функция selectPost():
function selectPost(id, title, body) {
window.idToUpdate = id;
document.getElementById('title-edit').value = title;
document.getElementById('body-edit').value = body;
document.getElementById('update-form').scrollIntoView({behavior: "smooth"});
console.log(document.getElementById('update-form')); // <div id="update-form" class="row col-lg-4 col-sm-16 my-3">
}
Форма имеет идентификатор update-form:
<div class="row col-lg-4 col-sm-16 my-3" id="update-form">
<h2>Редактирование поста</h2>
...
При клике на ссылку "Редактировать" происходит скроллинг к началу документа, а не к форме с id `update-form`, хотя при вызове функции selectPost() элемент формы выводится в консоли. Почему такое происходит?