Javascript 如何获得每张卡片上的按钮

我正试着挑选一些有鸟的牌。现在我做了一个按钮，如果你点击它，它会改变颜色，我想用这个按钮来“喜爱”这些鸟。现在我有按钮工作，但它不包括在卡中，如何使每只鸟有自己的按钮？如果在localstorage中单击了按钮，是否还有一种存储方法

编辑：忘记在html中包含该按钮，但现在已包含该按钮

window.addEventListener（'load'，init）；
const cardsContainer=document.querySelector（“#cards”）；
const aside=document.querySelector（“#wrapper aside”）；
var计数=1；
捕鸟={
“库尔梅斯”：{
src:'https://source.unsplash.com/1600x900/?koolmees',
标签：'rotterdam，koolmees，kleine vogel'
},
“Specht”：{
src:'https://source.unsplash.com/1600x900/?specht',
标签：'specht，nijmegen，kleine vogel'
},
“kerkuil”：{
src:'https://source.unsplash.com/1600x900/?snowowl',
标签：“uil、埃因霍温、格罗特·沃格尔、屋顶沃格尔”
}
};
/*
如果图像下方没有“figcaption”，则会添加标题和
指定作为数据集属性分配给图像的“tags”文本
*/
常量clickhandler=函数（e）{
设fig=e.target.parentNode.querySelector（'figcaption'）；
如果（图==null）{
图=document.createElement（'figcaption'）；
图.textContent=this.dataset.tags
e、 target.parentNode.appendChild（图）；
}否则{
e、 target.parentNode.removeChild（图）
}
aside.textContent=fig==null？“”：this.dataset.tags；
}
//此功能可更改按钮中的te颜色
功能设置颜色（btn，颜色）{
var属性=document.getElementById（btn）；
如果（计数=0）{
property.style.backgroundColor=“#FFFFFF”
计数=1；
}
否则{
property.style.backgroundColor=“#7FFF00”
计数=0；
}
}
函数init（）{
document.getElementById（'cards'）。queryselectoral（'.card'）。forEach（card=>{
card.addEventListener（'click'，clickhandler）；
});
}
函数addCard（birdImage、birdName、birdTags）{//现在接受3个参数
让item=document.createElement（'flex-item'）；
item.classList.add（'card'）；
item.dataset.tags=birdTags；//将标记分配为dataset属性
cardsContainer.appendChild（项目）
设img=document.createElement（'img'）
img.src=鸟笼；
title=birdTags；//也为img标题分配了标记
项目.附加子项（img）
让name=document.createElement（'div'）
name.innerText=birdName
item.appendChild（名称）
}
/*
有了新的数据结构，就有了一种新的迭代方法
数据是必需的。使用'object.keys'方法可以快速
遍历每个子对象。“钥匙”是鸟的名字。
*/
函数addCards（）{
Object.keys（birds.forEach）（key=>{
让鸟=鸟[钥匙]；
addCard（bird.src、key、bird.tags）
})
}
添加卡片（）

Vogel杂志voor vogelspotters！

开始全屏显示整个页面
全屏退出


旁白1
页脚

您可以在每次添加卡片时添加一个收藏夹按钮，并将

onclick

处理程序附加到卡片上。更改

setColor

函数，将元素直接作为参数。设置fav按钮的值以检查其处于哪个状态。因此，当您希望与服务器通信/在localStorage中存储收藏夹时，只需从fav按钮获取值

window.addEventListener（'load'，init）；
const cardsContainer=document.querySelector（“#cards”）；
const aside=document.querySelector（“#wrapper aside”）；
var计数=1；
捕鸟={
“库尔梅斯”：{
src:'https://source.unsplash.com/1600x900/?koolmees',
标签：'rotterdam，koolmees，kleine vogel'
},
“Specht”：{
src:'https://source.unsplash.com/1600x900/?specht',
标签：'specht，nijmegen，kleine vogel'
},
“kerkuil”：{
src:'https://source.unsplash.com/1600x900/?snowowl',
标签：“uil、埃因霍温、格罗特·沃格尔、屋顶沃格尔”
}
};
/*
如果图像下方没有“figcaption”，则会添加标题和
指定作为数据集属性分配给图像的“tags”文本
*/
常量clickhandler=函数（e）{
设fig=e.target.parentNode.querySelector（'figcaption'）；
如果（图==null）{
图=document.createElement（'figcaption'）；
图.textContent=this.dataset.tags
e、 target.parentNode.appendChild（图）；
}否则{
e、 target.parentNode.removeChild（图）
}
aside.textContent=fig==null？“”：this.dataset.tags；
}
//此功能可更改按钮中的te颜色
功能设置颜色（el，颜色）{
如果（el.value==0）{
el.style.backgroundColor=“#FFFFFF”
el.value=1；
}否则{
el.style.backgroundColor=“#7FFF00”
el.value=0；
}
}
函数init（）{
document.getElementById（'cards'）。queryselectoral（'.card'）。forEach（card=>{
card.addEventListener（'click'，clickhandler）；
});
}
函数addCard（birdImage、birdName、birdTags）{//现在接受3个参数
让item=document.createElement（'flex-item'）；
item.classList.add（'card'）；
item.dataset.tags=birdTags；//将标记分配为dataset属性
cardsContainer.appendChild（项目）
让favBtn=document.createElement（'按钮'）
favBtn.innerText=❤'
favBtn.value=0
favBtn.setAttribute（'onclick'，'setColor（this，“#101010”））
favBtn.classList.add（'fav-btn'）
项目.附件子项（favBtn）
设img=document.createElement（'img'）
img.src=鸟笼；
title=birdTags；//也为img标题分配了标记
项目.附加子项（img）
让name=document.createElement（'div'）
name.innerText=birdName
item.appendChild（名称）
}
/*
有了新的数据结构，就有了一种新的迭代方法
数据是必需的