Mi secuencia de comandos actual le permite agregar una tarjeta + algo de información sobre su contenido haciendo clic en el resultado de una barra de búsqueda.
El objetivo es crear una especie de lista de películas. Sin embargo, no sé cómo, dónde o si debo implementar un bucle para agregar varias tarjetas, en lugar de reemplazar una.
Mi mayor problema es que después de hacer clic en el elemento de resultado, la tarjeta activa se reemplaza por la nueva.
La primera función carga el contenido basado en una API. Básicamente borra la barra de búsqueda después de hacer clic en el elemento que se muestra a través de la investigación. También llama a la función encargada de agregar un div (una tarjeta con la información de la película) al HTML.
function loadContentDetails(){ const searchListContent = searchList.querySelectorAll('.search-list-item'); searchListContent.forEach(content => { content.addEventListener('click', async () =>{ searchList.classList.add('hide-search-list'); searchBar.value = ""; const result = await fetch(`http://www.omdbapi.com/?i=${content.dataset.id}&apikey=60ee3e91`); const contentDetails = await result.json(); displayContentDetails(contentDetails); }); });}La segunda función crea una nueva tarjeta basada en lo que el usuario seleccionó a través de la barra de búsqueda.
function displayContentDetails(details){ cardsGroupFlex.innerHTML = ` <div class="card"> <img src="${(details.Poster != "N/A") ? details.Poster: "resources/img-not-found.png"}" alt="" class="card-img" /> <div class="card-description"> <p class="card-title">${details.Title}</p> <p> ${(details.Plot)} </p> </div> </div> `; }Agradecería mucho su ayuda.
Cambie cardsGroupFlex.innerHTML = a cardsGroupFlex.innerHTML += (agregue un signo "+" antes de "="). Esto concatenará una nueva tarjeta con el HTML interno en lugar de reemplazar el HTML interno con la nueva tarjeta:
cardsGroupFlex.innerHTML += ` <div class="card"> <img src="${(details.Poster != "N/A") ? details.Poster: "resources/img-not-found.png"}" alt="" class="card-img" /> <div class="card-description"> <p class="card-title">${details.Title}</p> <p> ${(details.Plot)} </p> </div> </div> `;Una solución simple es que, en lugar de configurar el cardsGroupFlex innerHTML puede agregar la tarjeta al final del innerHTML interno.
// instead of cardsGroupFlex.innerHTML = `...` // appending with += cardsGroupFlex.innerHTML += `...` Sin embargo, si va a implementar una función como eliminar o editar las tarjetas, necesitará tener una matriz global de los detalles de la tarjeta y recorrerlos todos dentro de displayContentDetails .
Esta solución también podría hacer uso de la adición al final de una cadena.
function displayContentDetails(){ let newInner = '' for (const details of globalCards) { inner += ` <div class="card"> <img src="${(details.Poster != "N/A") ? details.Poster: "resources/img-not-found.png"}" alt="" class="card-img" /> <div class="card-description"> <p class="card-title">${details.Title}</p> <p> ${(details.Plot)} </p> </div> </div> ` } }Una nota rápida: no use searchList.classList.add como función/método. es una propiedad Entonces haga lo siguiente para agregar clases.
searchList.classList.add = 'hide-search-list';Esto es solo de una observación rápida en su código.