I am using HTML, CSS, and JavaScript to create a blog. There are 2 pages involved; a page where the posts are displayed, and a page where the posts are made. There is a "post" button in the latter (the page where the posts are made). I want that when the user clicks "post" after writing his or her post a div is added to the former (page where posts are displayed) with the content of the post (innerHTML of the textarea where the post is written).
I have used the following JavaScript code after watching a couple of videos but it is not working.
const BtnAdd = document.getElementById("postButton");
var cWrapper = document.getElementById("contentwrapper");
BtnAdd.addEventListener("click",AddNew);
function AddNew(){
const newDiv = document.createElement("div");
newDiv.classList.add("div-shadow");
newDiv.innerHTML = document.getElementById("postcontent").innerHTML;
cWrapper.appendChild(newDiv);
}
"cWrapper" refers to the location (div) where I want the divs to be added (in the page where the posts are displayed).
whenever I click the button with ID "postButton" no divs are added to the other page. Any ideas where I went wrong?
//you need to add below code in page 1.
const BtnAdd = document.getElementById("postButton");
BtnAdd.addEventListener("click", AddNew);
function AddNew() {
var newhtml = document.getElementById("bannerText").innerHTML;
sessionStorage.setItem("page1content", newhtml);
}
//you need to add below code in page 2.
const newDiv = document.createElement("div");
newDiv.classList.add("div-shadow");
newDiv.innerHTML = sessionStorage.getItem("page1content");
var cWrapper = document.getElementById("contentwrapper");
cWrapper.appendChild(newDiv);
you have to add code two differnt page (page-1 like blog page, and page-2 like blog details page)