0

我使用 api 和 fetch(URL) 方法将信息发布到 dom。例如，API 返回标题和海报。我还添加了一个段落来描述节目。所以我有一个包含所有三个部分的部分。我为 5 个节目做这件事，我将它设置为当我单击按钮时所有 5 个节目都出现在 dom 上的位置，但我希望它一次只在 dom 中显示一个节目。例如，我有 5 个节目，我希望第一次单击显示 Show #5，然后在下一次单击删除 show #5 并显示 Show #4。

我知道一个 forEach 方法可以解决问题，但我不确定如何实现它。任何指针？

这是我的示例代码。我有五个，但这里有两个

document.querySelector('.getShows').addEventListener('click', getShow)

async function getShow(){

    // This is for the number 1 show
    const res = await fetch("https://movie-database-imdb-alternative.p.rapidapi.com/?s=the%20wire&page=1&r=json", {
        "method": "GET",
        "headers": {
            "x-rapidapi-key": "504",
            "x-rapidapi-host": "movie-database-imdb-alternative.p.rapidapi.com"
        }
    })

    const data = await res.json();

    //// This is for the number 2 show////////////////////////////

    const res2 = await fetch("https://movie-database-imdb-alternative.p.rapidapi.com/?s=The%20sopranos&page=1&r=json", {
        "method": "GET",
        "headers": {
            "x-rapidapi-key": "504",
            "x-rapidapi-host": "movie-database-imdb-alternative.p.rapidapi.com"
        }
    })
    const data2 = await res2.json();

try{
        console.log(data.Search[0].Poster)
        let image1 = data.Search[0].Poster
        let title1 = data.Search[0].Title
        document.querySelector('.showTitle1').innerText = `1. ${title1}`
        document.getElementById('showImg1').style.visibility = 'visible'
        document.getElementById('showImg1').src = image1
        document.querySelector('.myDescription').style.visibility = 'visible'
        /////////////////////////////////////////////////
        //////Show 2/////////////////////////////////////
        let image2 = data2.Search[0].Poster
        let title2 = data2.Search[0].Title
        document.querySelector('.showTitle2').innerText = `2. ${title2}`
        document.getElementById('showImg2').style.visibility = 'visible'
        document.getElementById('showImg2').src = image2
        document.querySelector('.myDescription2').style.visibility = 'visible'

} catch(err){
        console.log(`err ${err}`)
    }

}
4

0 回答 0