I am creating a website that's basically a library. There are two html files: 1 for the library and one for the platform where you can see what's inside the items in the library.
I want to change the values of the platform depending on which item you clicked in the library.
So for example: If book 1 is clicked the platform has to know that that item is clicked and has to display specific values.
I am building this with html, css and js
You can post data back/forth between html files using forms. Here are some examples of how to do that.
https://www.w3schools.com/html/html_forms.asp
https://www.smashingmagazine.com/2010/04/php-what-you-need-to-know-to-play-with-the-web/
However, if I correctly understand what you're doing, you shouldn't need to use two html files to do what you want - thanks to AJAX.
AJAX allows you to update the same page with information (a) based on user click/input, (b) from a server-side lookup (ie. from a database, or a flat file, or etc)
Here's a simple example of displaying different data based on the user's selection:
const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);
const books = {
'Moby Dick': 'A whale of a good book',
'Perelandra': 'Book two of C.S. Lewis\' little known sci fi trilogy',
'The Two Towers': 'Overrated book by close friend of C.S. Lewis',
}
document.addEventListener('DOMContentLoaded', () => {
$$('.book').forEach( (v, i) => {
v.addEventListener('click', () => {
const bookTitle = v.innerText;
const bookInfo = books[v.innerText];
$('.msgbox').innerText = bookInfo;
//This Part can be replaced by an ajax call to lookup info from the server
//You can use jQuery $.ajax(), or javascript fetch, or javascript XMLHttpRequest
//(above listed from easiest to more difficult)
});
});
});.wrap{display:flex}
.library{width:50%;height:500px;padding:50px;}
.book{padding:20px;font-size:18px;color:navy;}
.platform{
width:50%;
height:300px;
text-align:center;
font-size:1.5rem;
color:brown;
background:azure;
display:grid;
place-content:center;
}<div class="wrap">
<div class="library">
<div class="book">Moby Dick</div>
<div class="book">Perelandra</div>
<div class="book">The Two Towers</div>
</div><!-- .library -->
<div class="platform">
<div class="msgbox"></div>
</div><!-- .platform -->
</div>If you need to get data from the server to populate the platform information, you can modify the eventListener function after grabbing the bookTitle, as documented in the code.
To do the server call, you can use either jQuery $.ajax(), or javascript fetch (most current), or the old standard of javascript's XMLHttpRequest
Because this is such a popular thing to do, there are several gazillion tutorials on the web and on YouTube.