'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