所以我有一个非常基本的网站，您可以在其中添加带有标题、作者和内容的博客文章。这些帖子还有两个按钮 - 一个删除和一个编辑按钮。这两个按钮，以及将帖子添加到 html 也可以通过本地 json 服务器在 .json 文件中添加/删除/编辑所选帖子。一切正常，除了一个 - 当我单击其中一个站点中的编辑按钮时，它应该为表单提供 2 个新按钮，并用帖子值填写表单。除了，当我点击编辑时，我可以看到表单中的两个新按钮被添加（保存和取消）但眨眼间它也会重新加载整个网站，阻止我用按钮编辑帖子。
这是我的html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://bootswatch.com/4/yeti/bootstrap.min.css">
<script src="https://kit.fontawesome.com/6baa217c17.js" crossorigin="anonymous"></script>
<title>Washington Post</title>
</head>
<body>
<div class="container mt-4">
<h1 class="display-4 text-center">
<i class="fas fa-book-open text-primary"></i>My<span class="text-primary">Blog</span></h1>
<form action="" id="book-form">
<div class="form-group">
<label for="title">Title</label>
<input type="text" id="title" class="form-control">
</div>
<div class="form-group">
<label for="author">Author</label>
<input type="text" id="author" class="form-control">
</div>
<div class="form-group">
<label for="content">Content</label>
<input type="text" id="content" class="form-control">
</div>
<div id="btn-container">
<button id="add-post-button" class="btn btn-primary btn-block">Add Post</button>
</div>
<!-- POSTS -->
<div class="row">
<div id="post-container" class="col">
</div>
</div>
<script src="script.js"></script>
</body>
</html>
这是javascript代码
//Fő változók
const baseUrl = "http://localhost:3000/posts";
const postContainer = document.getElementById("post-container");
const addPostBtn = document.getElementById("add-post-button");
//input mezők
const titleInput = document.getElementById("title");
const contentInput = document.getElementById("content");
const authorInput = document.getElementById("author");
const typeInput = document.getElementById("type");
//eventlisteners
addPostBtn.addEventListener("click", addPost);
postContainer.addEventListener("click", editOrDelete);
//függvények
function loadPosts(){
fetch(baseUrl)
.then(res => res.json())
.then(json => {
json.forEach(element => {
postContainer.appendChild(generatePostElement(element));
});
});
};
function generatePostElement(object) {
let postElement = document.createElement("div");
postElement.id = `post-${object.id}`;
postElement.classList = "card mt-5";
postElement.innerHTML = `<div class="p-5">
<h1>${object.title}</h1>
<span>${object.content}</span>
<blockquote>${object.author}</blockquote>
<button class="btn btn-danger btn-sm delete" id-to-delete="${object.id}">Delete</button>
<button class="btn btn-info btn-sm edit" id-to-edit="${object.id}">Edit</button>
</div>`;
return postElement;
};
function addPost(e){
e.preventDefault();
let newPostObject = {
title: titleInput.value,
author: authorInput.value,
content: contentInput.value
};
fetch(baseUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(newPostObject)
})
.then(res => res.json())
.then(json => {
resetForm();
postContainer.appendChild(generatePostElement(json));
});
};
function editOrDelete(e){
if (e.target.hasAttribute("id-to-delete")) {
deletePost(e.target.getAttribute("id-to-delete"));
} else if (e.target.hasAttribute("id-to-edit")){
prepareEditPost(e.target.getAttribute("id-to-edit"));
} else {
console.log("egyik sem");
}
};
function deletePost(id) {
let deleteUrl = `${baseUrl}/${id}`;
fetch(deleteUrl, {
method: 'DELETE'
})
.then(res => console.log("Post " + id + " deleted"))
.then(res => {
document.getElementById(`post-${id}`).remove();
});
};
function prepareEditPost(id) {
window.scrollTo(0, 0);
document.getElementById("btn-container").innerHTML = `
<button id="edit-btn" class="btn btn-success btn-block" id-to-edit="${id}">Save</button>
<button id="reset-btn" class="btn btn-danger btn-block">Cancel</button>`;
let editBtn = document.getElementById("edit-btn");
let resetBtn = document.getElementById("reset-btn");
editBtn.addEventListener("click", editPost);
resetBtn.addEventListener("click", resetForm);
let postUrl = `${baseUrl}/${id}`;
fetch(postUrl)
.then(res => res.json())
.then(json => {
//console.log(json);
titleInput.value = json.title;
contentInput.value = json.content;
authorInput.value = json.author;
})
};
function editPost(e) {
e.preventDefault();
let editPostObject = {
title: titleInput.value,
content: contentInput.value,
author: authorInput.value,
};
let id = e.target.getAttribute("id-to-edit");
let editUrl = `${baseUrl}/${id}`;
fetch(editUrl, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(editPostObject)
})
.then(res => res.json())
.then(json => {
resetForm();
let HTMLElementTotEdit = document.getElementById(`post-${id}`);
HTMLElementTotEdit.parentNode.replaceChild(generatePostElement(json), HTMLElementTotEdit);
});
};
function resetForm() {
titleInput.value = "";
contentInput.value = "";
authorInput.value = "";
document.getElementById("btn-container").innerHTML = `<button id="add-post-button" class="btn btn-primary btn-block">Add Post</button>
`;
};
//kezdés
loadPosts();
如果有人可以帮助我防止网站在单击编辑按钮时重新加载，那就太棒了！如果现在有什么清楚的请问，英语不是我的母语。