I have a pair of HTML files known as list.html and detail.html. From https://jsonplaceholder.typicode.com/posts, I am retrieving title and body data to exhibit on a posts.html page in the following format:
Displayed below is my posts.html code:
<!DOCTYPE html>
<html>
<head>
<title>List</title>
</head>
<body>
<div id="post">
<a>
<h3 class="title"> </h3>
</a>
<p class="body"> </p>
</div>
<script src="fetch.js"></script>
</body>
</html>
Moreover, here is my JavaScript code snippet used within posts.html:
const api_url='https://jsonplaceholder.typicode.com/posts';
async function getISS(){
const response = await fetch(api_url);
const data= await response.json();
let post = document.getElementById("post");
for (let i = 1; i < data.length; i++) {
const { id, title, body } = data[i]
post.innerHTML += `<a href="detail.html">
<h3 class="title">${title}</h3></a>
<p class="body">${body} </p>`
}
}
getISS();
My objective is to navigate to the detail.html screen upon clicking a post's title, where only the selected post's title and body are displayed. For instance, by clicking the "qui est esse" title from the posts.html output image above, it should lead to detail.html showing only the title and body like this:
If the second post "ea molestias quasi exercitationem repellat qui ipsa sit aut" title is clicked, it should again redirect to the detail.html screen but this time displaying only that specific title and body.
Below is my current detail.html code which does not contain anything significant yet:
<!DOCTYPE html>
<html>
<head>
<title>Detail</title>
</head>
<body>
<h1>Title</h1>
<p>Body</p>
<script src="detail-script.js"></script>
</body>
</html>
I am fairly new to HTML and JavaScript development. I believe I need to utilize query strings for this functionality, however, I haven't been successful thus far. I am restricted to using solely native JavaScript without any frameworks. Can someone guide me on how I can achieve this?