I'm encountering an issue while attempting to dynamically add posts to my post div. The problem arises when I try to include image URLs in the process. Switching from innerText to innerHTML did not resolve the issue, and the array I added is also not being displayed.
// Defining DOM variables
let button = document.getElementById("btn");
let postForm = document.getElementById("post-form");
let displayPostsCont = document.querySelector(".displayPosts");
let title = document.getElementById("postTitle");
let author = document.getElementById("authorName");
let text = document.getElementById("textP");
let image = document.getElementById("newPostImageUrl");
// Array where newly added posts will be stored
const posts = [{
title: "My first blog post",
author: "Kam",
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Pretium aenean pharetra magna ac placerat vestibulum lectus.",
image: "https://images.pexels.com/photos/936048/pexels-photo-936048.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
},
{
title: "My second blog post",
author: "Kam",
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Pretium aenean pharetra magna ac placerat vestibulum lectus.",
image: "https://images.pexels.com/photos/936048/pexels-photo-936048.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
}
];
const addPost = (title, author, text, image) => {
}
// Creating the blog post with elements and then appending it
const createBlogPostElement = ({title, author, text, image}) => {
// Create elements
const postDiv = document.createElement('div');
const blogPostTitle = document.createElement('h2');
const authorName = document.createElement('h6');
const authorPost = document.createElement('p');
const authorImg = document.createElement('img').src = "";
// Add content
blogPostTitle.innerText = "Blog post title: " + title;
authorName.innerText = "Author name: " + author;
authorPost.innerText = "post: " + text;
authorImg.innerText = "image: " + image;
// Append to the DOM
postDiv.append(blogPostTitle, authorName, authorPost, authorImg);
displayPostsCont.appendChild(postDiv);
}
posts.forEach(createBlogPostElement);