How do I get the button on each card javascript

Question

I'm trying to make a selection of cards with birds in it. Now I made a button that changes color if you click on it, I want to use this button to "favorite" the birds. Now i have the button working but its not included in the cards, how do make it that each bird has its own button? Is there also a way to store if a button has been clicked in the localstorage?

Edit: forgot to include the button in the html but it has now been included

window.addEventListener('load', init);

const cardsContainer = document.querySelector('#cards');
const aside = document.querySelector('#wrapper aside');
var count = 1;


const birds={
    'Koolmees':{
        src:'https://source.unsplash.com/1600x900/?koolmees',
        tags:'rotterdam, koolmees, kleine vogel'
    },
    'Specht':{
        src:'https://source.unsplash.com/1600x900/?specht',
        tags:'specht, nijmegen, kleine vogel'
    },
    'kerkuil':{
        src:'https://source.unsplash.com/1600x900/?snowowl',
        tags:'uil, eindhoven, grote vogel, roofvogel'
    }
};


/*
  if there is no `figcaption` below the image it will add the caption and
  assign the `tags` text which is assigned to the image as a dataset attribute
*/
const clickhandler=function(e){
    let fig=e.target.parentNode.querySelector('figcaption');
    if( fig==null ){
        fig=document.createElement('figcaption');
        fig.textContent=this.dataset.tags
        e.target.parentNode.appendChild( fig );
    }else{
        e.target.parentNode.removeChild(fig)
    }
    aside.textContent=fig==null ? '' : this.dataset.tags;
}


//this function changes te color in the button
function setColor(btn, color) {
    var property = document.getElementById(btn);
    if (count == 0) {
        property.style.backgroundColor = "#FFFFFF"
        count = 1;
    }
    else {
        property.style.backgroundColor = "#7FFF00"
        count = 0;
    }
}


function init(){

    document.getElementById('cards').querySelectorAll('.card').forEach( card => {
        card.addEventListener('click',clickhandler );
    });
}


function addCard(birdImage, birdName, birdTags){// now takes 3 arguments
    let item = document.createElement('flex-item');
    item.classList.add('card');
    item.dataset.tags=birdTags; //assign the tags as a dataset atttribute
    cardsContainer.appendChild(item)

    let img = document.createElement('img')
    img.src = birdImage;
    img.title=birdTags; //  tags also assigned for the img title
    item.appendChild(img)

    let name = document.createElement('div')
    name.innerText = birdName
    item.appendChild(name)
}



/*
  With the new data structure a new approach to iterating through the
  data is required. Using the `object.keys` method allows us to quickly
  iterate through each sub-object. The `key` is the bird name.
*/
function addCards(){
    Object.keys( birds ).forEach( key => {
        let bird=birds[ key ];
        addCard( bird.src, key, bird.tags )
    })
}

addCards()

<div id='wrapper'><!-- There is no HTML element `wrapper` -->
<header><p1>Vogel magazine voor vogelspotters!</p1></header>
<main>
    <p>
        <button class="start" id="startFull">Start fullscreen on the whole page</button>
        <button id="exit">Exit fullscreen</button>
    </p>

    <p id="logTarget"></p>

    <flex-container id="cards">
        <input type="button" id="button" value = "button" style= "color:white" onclick="setColor('button', '#101010')";/>

    </flex-container><!-- unusual to assign custom elements without accompanying javascript/css -->
</main>
<aside>Aside 1</aside>
<footer>Footer</footer>
</div>

Answer 1

You can add a favorite button every time you add a card and attach the onclick handler to it. Change your setColor function to take an element directly as the parameter. Set the value of the fav button to check which state it is in. So, when you want to communicate to server/store the favorites in localStorage, just take the value from the fav buttons.

window.addEventListener('load', init);

const cardsContainer = document.querySelector('#cards');
const aside = document.querySelector('#wrapper aside');
var count = 1;


const birds={
    'Koolmees':{
        src:'https://source.unsplash.com/1600x900/?koolmees',
        tags:'rotterdam, koolmees, kleine vogel'
    },
    'Specht':{
        src:'https://source.unsplash.com/1600x900/?specht',
        tags:'specht, nijmegen, kleine vogel'
    },
    'kerkuil':{
        src:'https://source.unsplash.com/1600x900/?snowowl',
        tags:'uil, eindhoven, grote vogel, roofvogel'
    }
};


/*
  if there is no `figcaption` below the image it will add the caption and
  assign the `tags` text which is assigned to the image as a dataset attribute
*/
const clickhandler=function(e){
    let fig=e.target.parentNode.querySelector('figcaption');
    if( fig==null ){
        fig=document.createElement('figcaption');
        fig.textContent=this.dataset.tags
        e.target.parentNode.appendChild( fig );
    }else{
        e.target.parentNode.removeChild(fig)
    }
    aside.textContent=fig==null ? '' : this.dataset.tags;
}


//this function changes te color in the button
function setColor(el, color) {
    if (el.value == 0) {
        el.style.backgroundColor = "#FFFFFF"
        el.value = 1;
    } else {
        el.style.backgroundColor = "#7FFF00"
        el.value = 0;
    }
}


function init(){

    document.getElementById('cards').querySelectorAll('.card').forEach( card => {
        card.addEventListener('click',clickhandler );
    });
}


function addCard(birdImage, birdName, birdTags){// now takes 3 arguments
    let item = document.createElement('flex-item');
    item.classList.add('card');
    item.dataset.tags=birdTags; //assign the tags as a dataset atttribute
    cardsContainer.appendChild(item)
    let favBtn = document.createElement('button')
    favBtn.innerText = '❤'
    favBtn.value = 0
    favBtn.setAttribute('onclick', 'setColor(this, "#101010")')
    favBtn.classList.add('fav-btn')
    item.appendChild(favBtn)
    let img = document.createElement('img')
    img.src = birdImage;
    img.title=birdTags; //  tags also assigned for the img title
    item.appendChild(img)

    let name = document.createElement('div')
    name.innerText = birdName
    item.appendChild(name)
}



/*
  With the new data structure a new approach to iterating through the
  data is required. Using the `object.keys` method allows us to quickly
  iterate through each sub-object. The `key` is the bird name.
*/
function addCards(){
    Object.keys( birds ).forEach( key => {
        let bird=birds[ key ];
        addCard( bird.src, key, bird.tags )
    })
}

addCards()

.fav-btn {
  position: absolute;
  z-index: 10000000;
}

<div id='wrapper'><!-- There is no HTML element `wrapper` -->
<header><p1>Vogel magazine voor vogelspotters!</p1></header>
<main>
    <p>
        <button class="start" id="startFull">Start fullscreen on the whole page</button>
        <button id="exit">Exit fullscreen</button>
    </p>

    <p id="logTarget"></p>

    <flex-container id="cards">

    </flex-container><!-- unusual to assign custom elements without accompanying javascript/css -->
</main>
<aside>Aside 1</aside>
<footer>Footer</footer>
</div>