Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

127
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!