好日子窥视， 我正在研究如何创建包含喜欢、不喜欢和评论的博客文章的项目。我是一个新的 javascript 学生。
这是我的代码，但它没有渲染。已尝试使用 Chrome console.log() 检查但看不到任何错误。
HTML：
<!DOCTYPE html>
<html>
<head>
<title>Lovinta Blog Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<header>
<h1>Lovinta Blog Website</h1>
</header>
<main>
<section>
<h2>Welcome to our Love health blog</h2>
<form id="blogForm">
<!-- Form for blog content -->
<label for="title">Title:</label>
<input type="text" id="title" name="title" title="Title of your post" required><br><br>
<label for="author">Author:</label>
<input type="text" id="author" name="author" title="Name of author" required><br><br>
<label for="content">Content:</label>
<textarea id="content" name="content" rows="15" cols="15" title="Your comment here" required></textarea><br><br>
<button type="submit">Create Post</button>
</form>
</section>
<section>
<h2>All Posts</h2>
<div id="blogPostsDiv">
<!-- Blog posts will be rendered here -->
</div>
</section>
</main>
</div>
<script src="app.js"></script>
</body>
</html>
Javascript：
// Define a class for blog posts
class BlogPost {
constructor(title, author, content) {
this.title = title;
this.author = author;
this.content = content;
this.likes = 0;
this.dislikes = 0;
this.comments = [];
}
addLike() {
this.likes++;
}
addDislike() {
this.dislikes++;
}
addComment(comment) {
this.comments.push(comment);
}
}
// Define an array to hold all blog posts
let posts = [];
// Function to render a single blog post
function renderBlogPost(post) {
const postDiv = document.createElement('div');
postDiv.classList.add('blog-post');
const postTitle = document.createElement('h3');
postTitle.textContent = post.title;
postDiv.appendChild(postTitle);
const postAuthor = document.createElement('p');
postAuthor.textContent = `By: ${post.author}`;
postDiv.appendChild(postAuthor);
const postContent = document.createElement('p');
postContent.textContent = post.content;
postDiv.appendChild(postContent);
const likeButton = document.createElement('button');
likeButton.textContent = 'Like';
likeButton.addEventListener('click', () => {
post.addLike();
updatePostLikes(postDiv, post.likes, post.dislikes);
});
postDiv.appendChild(likeButton);
const dislikeButton = document.createElement('button');
dislikeButton.textContent = 'Dislike';
dislikeButton.addEventListener('click', () => {
post.addDislike();
updatePostLikes(postDiv, post.likes, post.dislikes);
});
postDiv.appendChild(dislikeButton);
const commentsHeader = document.createElement('h4');
commentsHeader.textContent = 'Comments';
postDiv.appendChild(commentsHeader);
const commentsList = document.createElement('ul');
postDiv.appendChild(commentsList);
const commentForm = document.createElement('form');
commentForm.addEventListener('submit', (event) => {
event.preventDefault();
const commentInput = commentForm.querySelector('input[type="text"]');
const commentText = commentInput.value.trim();
if (commentText !== '') {
const comment = {
text: commentText,
author: 'Anonymous',
};
post.addComment(comment);
renderComment(commentsList, comment);
commentInput.value = '';
}
});
postDiv.appendChild(commentForm);
const commentInputLabel = document.createElement('label');
commentInputLabel.textContent = 'Add a comment:';
commentForm.appendChild(commentInputLabel);
const commentInput = document.createElement('input');
commentInput.setAttribute('type', 'text');
commentForm.appendChild(commentInput);
const br = document.createElement('br');
commentForm.appendChild(br);
const updatePostLikes = (postDiv, likes, dislikes) => {
const likesLabel = postDiv.querySelector('.likes-label');
likesLabel.textContent = `${likes} likes, ${dislikes} dislikes`;
};
updatePostLikes(postDiv, post.likes, post.dislikes);
post.comments.forEach((comment) => {
renderComment(commentsList, comment);
});
return postDiv;
}
const renderComment = (commentsList, comment) => {
const commentItem = document.createElement('li');
const commentText = document.createElement('p');
commentText.textContent = comment.text;
commentItem.appendChild(commentText);
const commentAuthor = document.createElement('p');
commentAuthor.textContent = `By: ${comment.author}`;
commentItem.appendChild(commentAuthor);
commentsList.appendChild(commentItem);
};
// Define a function to handle form submission
function handleFormSubmit(event) {
event.preventDefault();
const title = document.getElementById('title').value;
const author = document.getElementById('author').value;
const content = document.getElementById('content').value;
const post = new BlogPost(title, author, content);
posts.push(post);
renderBlogPosts();
document.getElementById('blogForm').reset();
}
// Add event listener to form
const blogForm = document.getElementById('blogForm');
blogForm.addEventListener('submit', handleFormSubmit);
// Define a function to render all blog posts
function renderBlogPosts() {
const blogPostsDiv = document.getElementById('blogPostsDiv');
blogPostsDiv.innerHTML = '';
posts.forEach((post) => {
const postDiv = renderBlogPost(post);
blogPostsDiv.appendChild(postDiv);
});
}
如果我没有刷新浏览器，我该如何解决这个问题，以便新的博客文章可以在 blogPostDiv 中呈现。