Así que tengo una función que devuelve títulos de anime con pequeños detalles usando la API JIKAN. Básicamente, hay una búsqueda, el usuario busca el anime y la API devuelve una lista de diferentes animes basada en la búsqueda con poca información. Cuando haces clic en más información, debería aparecer un modal y contarte un poco más en profundidad sobre el anime en el que el usuario hizo clic. Esto es lo que tengo
return ` <div class="card" style="width: 18rem;"> <div class="card-imagea"> <img class="card-img-top" src="${anime.image_url}" alt="Card image cap"> <div class="card-info"> <p class="card-text">Type: ${anime.type}</p> <p class="card-text">Episodes: ${anime.episodes}</p> <p class="card-text">Score: ${anime.score}</p> </div> <div class="card-body"> <button type="button" id="modalLaunch" class="btn btn-primary"onclick="document.getElementById('id01').style.display='block'">More Info</button> </div> </div> <!--w3 modal example--> <div id="id01" class="w3-modal"> <div class="w3-modal-content"> <div class="w3-container"> <div class="card-body" <h5 class="card-title">${anime.title}</h5> <p class="card-text">${anime.synopsis}</p> <a href="${anime.url}" class="btn btn-primary">More!</a> </div> </div> </div> </div> </div> ` }).join(""); return ` <section> <h3>${key.toUpperCase()}</h3> <div class="card-row">${thereturnfunctionabove}</div> </section> ` }).join(""); }
El problema que tengo es que el modal no se actualiza cada vez que el usuario hace clic en un nuevo título de anime. Quiero que cada vez que el usuario haga clic en el botón de más información actualice el modal con información para cualquier anime en el que haga clic.