'How do I make the user go to a new page (with the post description) when an individual post is clicked?
example posts on my site I have a list of posts on my homepage, and when a user clicks on it, I want to show the detailed post (on a new page). I am not looking for the code here- I just want some help figuring out how it would be done. The posts are saved in a test table in a mySQL database. When a user clicks on a single post, I want to show them a new page (I will just use eventListener to show a newPage.html or something) with the description. Here's where it got tricky, I want the post descriptions to load dynamically so I don't have to go in and make individual HTML files for each post. Here's what I've done so far: (1) The posts on the homepage are rendered from the MySQL database- I just created a new div(className="singlePost") and added the title & description from the database into that. (2) Added an eventListener to each div so that when it's clicked, the div element is logged to the console & used location.href to point the user to a blank page (newPage.html). (3) What I cannot figure out is how to pass the content of each div to the blank page. Any help would be appreciated. Thanks:)
//the code is pretty confusing but hope it helps
//in node server.js
app.get('/showposts', (req,res) => {
console.log('will shows all posts in database');
connection.query(`select * from test`,
(error, results) => {
if (error) console.log(error);
console.log('got data from database');
res.send(results)
}
)
})
//in the main.js file
document.addEventListener(
'DOMContentLoaded',
() => {
fetch('http://localhost:4000/showposts')
.then(response => response.json())
.then(data => {
// console.log(data);
for (i in data) {
// console.log(data[i]);
singlePost = document.createElement('div');
singlePost.className = 'singlePost';
titleTextNode = document.createTextNode(data[i].title);
descriptionTextNode = document.createTextNode(data[i].description);
postHeading = document.createElement('h2');
postHeading.appendChild(titleTextNode);
singlePost.appendChild(postHeading);
singlePost.appendChild(descriptionTextNode);
allPosts.appendChild(singlePost);
// console.log(postHeading);
// console.log(singlePost);
clickableSinglePost = document.getElementsByClassName('singlePost');
}
for (let k = 0 ; k < clickableSinglePost.length; k++) {
clickableSinglePost[k].addEventListener(
'click',
() => {
console.log(clickableSinglePost[k]);
location.href = "http://localhost:4000/singlePost.html";
}
)
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
