How do I get my cards to swap places in this poker game?

I'm working on a final project for my College Javascript class, the project is to call an API, https://deckofcardsapi.com/, and build a simple poker game that keeps score. I've been stuck on the part where I can select the cards I want to get rid of and swap in new cards from the deck for almost two days. My program so far does,

1. init call of the deck from the API and sets deck ID
2. Selects first five cards from the shuffled deck and builds them on the page
3. Detects when you check the cards check box and puts them in a new array
4. Calls new cards from the shuffled deck to replace the checked ones.
5. Here is where I am stuck. The checkCards function is wrong somehow and maybe the newCard function as well.

Can anyone point me in the right direction?

`

`
let deckID = '';
let deck = '';
let deckHand = \[\];
let CardPanel = document.getElementById('cardPanel');
let Suit = '';
let Value = '';
let Pic = '';
let Code = '';
let card1 = deckHand\[0\];
let card2 = deckHand\[1\];
let card3 = deckHand\[2\];
let card4 = deckHand\[3\];
let card5 = deckHand\[4\];
let cards = \[card1, card2, card3, card4, card5\];
let selectedCardCodes = \[\];
let matched = \[\];
const gameBtn = document.getElementById('gameBtn');
const playCard = document.getElementById('drawCard');
let cardNum = 0;

//calls initial deck and sets the deck ID
function initCall() {
fetch('https://deckofcardsapi.com/api/deck/new/shuffle/')
.then(response =\> response.json())
.then((data) =\> {
//console.log(data.deck_id);
deckID = data.deck_id;
return data;
})
}

initCall();

// Starts game and builds and loads first five cards
gameBtn.addEventListener('click', () =\> {
fetch(`https://deckofcardsapi.com/api/deck/${deckID}/draw/?count=5`)
.then(response =\> response.json())
.then((data) =\> {
//deck = deckID;
console.log(data);
console.log(deckID);
for (let card = 0; card \< data.cards.length; card++) {
deckHand.push(data.cards\[card\]);
deck = deckHand;
}
card1 = deckHand\[0\];
card2 = deckHand\[1\];
card3 = deckHand\[2\];
card4 = deckHand\[3\];
card5 = deckHand\[4\];
// Display Cards on page
cards = \[card1, card2, card3, card4, card5\];
//let cardNum = 1;

            for (const card of cards) {
    
                let cardDiv = buildCard(card);
    
                document.querySelector('#cardPanel').appendChild(cardDiv);
    
            }
            //return cards;
            //console.log(cards);
    
        })
        .catch(error => console.log(error))
    //)

})

function buildCard(card) {

    let cardDiv = document.createElement("div");
    cardDiv.setAttribute('id', `card${cardNum}`);
    let cardImg = `<img src="${card.image}" style="display: block">`;
    let cardName = `${card.value} OF ${card.suit} || `;
    let checkbox = do开发者_如何学运维cument.createElement('input');
    checkbox.type = "checkbox";
    checkbox.setAttribute('id', `check${cardNum}`);
    checkbox.setAttribute('class', 'checkbox');
    checkbox.addEventListener('change', () => {
        console.log('Card selected', card);
        if (checkbox.checked) {
            selectedCardCodes.push(card);
        } else {
            // selected cards.remove card
            selectedCardCodes = selectedCardCodes.filter((c) => {
                return c.code !== card.code
            });
        }
    
        console.log(selectedCardCodes);
    })
    
    //console.log(cardNum);
    cardDiv.insertAdjacentHTML("afterbegin", cardImg);
    cardDiv.append(cardName);
    cardDiv.append(checkbox);
    
    cardNum++;
    return cardDiv;

}

async function newCard() {

    fetch(`https://deckofcardsapi.com/api/deck/${deckID}/draw/?count=1`)
        .then(response => response.json())
        .then((data) => {
            //deck = deckID;
            console.log(data);
            //console.log(deckID);
            for (let card = 0; card < data.cards.length; card++) {
                card = data.cards[card];
                return card;
                // deckHand.push(data.cards[card]);
                // deck = deckHand;
                // return cards[card];
            }
    
        })

}

async function checkCards(cards, selectedCardCodes) {

    matched = selectedCardCodes.filter((m) => {
        return cards.code === selectedCardCodes.code;
    })
    
    for (const card of matched) {
        let replacement = newCard();
        replacement = cards.splice(card, 1, replacement);
        return replacement;
    
    }
    
    //console.log(matched);

}

// Get card from API and add to array
playCard.addEventListener('click', async () =\> {

// remove selected cards from cards array
// draw n# of new cards
// add new cards to card array
// remove selected cards from array and reset array
// remove card array from DOM and redraw card array

})

`

I've tried splice, push and pop, and filter.