Estoy creando un sitio web que es básicamente una biblioteca. Hay dos archivos html: 1 para la biblioteca y otro para la plataforma donde puede ver qué hay dentro de los elementos de la biblioteca.
Quiero cambiar los valores de la plataforma según el elemento en el que haya hecho clic en la biblioteca.
Entonces, por ejemplo: si se hace clic en el libro 1, la plataforma debe saber que se hizo clic en ese elemento y debe mostrar valores específicos.
Estoy construyendo esto con html, css y js
Puede publicar datos de ida y vuelta entre archivos html mediante formularios. Estos son algunos ejemplos de cómo hacerlo.
https://www.w3schools.com/html/html_forms.asp
https://www.smashingmagazine.com/2010/04/php-lo-que-necesita-saber-para-jugar-con-la-web/
Sin embargo, si entiendo correctamente lo que está haciendo, no debería necesitar usar dos archivos html para hacer lo que quiere, gracias a AJAX.
AJAX le permite actualizar la misma página con información (a) basada en el clic/entrada del usuario, (b) desde una búsqueda del lado del servidor (es decir, desde una base de datos, o un archivo plano, etc.)
Aquí hay un ejemplo simple de mostrar diferentes datos según la selección del usuario:
const $ = document.querySelector.bind(document); const $$ = document.querySelectorAll.bind(document); const books = { 'Moby Dick': 'A whale of a good book', 'Perelandra': 'Book two of CS Lewis\' little known sci fi trilogy', 'The Two Towers': 'Overrated book by close friend of CS 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>Si necesita obtener datos del servidor para completar la información de la plataforma, puede modificar la función eventListener después de tomar el título del libro, como se documenta en el código.
Para hacer la llamada al servidor, puede usar jQuery $.ajax() , o javascript fetch (la más actual), o el antiguo estándar de XMLHttpRequest de javascript
Debido a que esto es algo tan popular, hay muchos tutoriales en la web y en YouTube.