Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

135
Visualizações
How can I update the modal

So I have a function that returns anime titles with little details using the JIKAN API. The user searches the anime and API returns a list of different animes based on the search with little info. When you click on more info, a modal should appear and tell you a bit more in-depth about the anime the user clicked on. Here's what I have

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("");
}

The issue I'm having is the modal is not updating every time the user clicks on a new anime title. Right now the modal only shows the first result regardless of which title is clicked. I want anytime the user clicks on the more info button to update the modal with info for whatever anime they click on.

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda