Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Calculator

0

39
Views
Change modal results based on button click

So I have a function that returns anime titles with little details using the JIKAN API. Basically, there's a search, 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. I want anytime the user clicks on the more info button to update the modal with info for whatever anime they click on.

7 months ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.