问题描述
我使用 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","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}`)
}
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)