在一个有趣的辅助项目上工作,遇到了一些麻烦。
基本上,我有一个页面,允许用户登录到Spotify。然后,我将他们重定向到一个页面,该页面将他们的前10位艺术家放入卡片中,其中包含艺术家的姓名,图片和一个小按钮,以查看即将上映的节目。我想将该按钮链接到我已经在另一个脚本中编写的函数,该脚本将拉动他们指定的艺术家即将举行的音乐会。
我遇到的麻烦是访问我正在创建的按钮。
这是我正在运行的全部功能:
async function fetchArtists() {
return await fetch('https://api.spotify.com/v1/me/top/artists', settings)
.then((response) => {return response.json()})
.then((data) => {
let listOfArtists = data.items.slice(0, 10).map((item) => {
return {
name: item.name,
picture: item.images[1].url
}
})
//console.log(listOfArtists)
return listOfArtists;
}).then((listOfArtists) => {
listOfArtists.forEach((artist) => {
let createCard = document.createElement('div');
createCard.class = "card"
createCard.style = "width: 40% height: 40%"
createCard.innerHTML = `
<div class="row card-row justify-content-center">
<div class="col-md-6">
<div class="card bg-transparent text-black text-center ">
<img src="${artist.picture}" class="card-img rounded-circle shadow-lg p-3 mb-5 bg-black rounded" alt="...">
<div class="card-img-overlay"></div>
<div class="card-footer font-weight-bold bg-transparent">${artist.name}
<div class="row-md-6">
<button class="btn btn-dark">View Upcoming Shows</button>
</div>
</div>
</div>
</div>
let container = document.querySelector(".artist-grid")
container.appendChild(createCard)
})
});
}
这几乎完全按照我想要的方式工作,并输出以下内容:
问题是我似乎无法让事件监听器在按钮上工作。
我尝试将这段代码添加到我的forEach中,最后一个
myButton = document.querySelector(".btn")
myButton.addEventListener("click, () => {
console.log("Test to see if button onclick works")
单击时它不会输出任何内容到控制台。因此,我运行了myButton的控制台日志,其中显示了10个按钮,因此如果看起来可以访问它们,则不确定断开连接是什么。
最佳答案
也许是因为您忘记了单击后的双引号吗?
myButton.addEventListener(“ click,()=> {
console.log(“测试按钮onclick是否有效”)
应该替换为
myButton.addEventListener(“ click”,()=> {
console.log(“测试按钮onclick是否有效”)
关于javascript - 将事件监听器添加到动态创建的按钮,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59384808/