Javascript practice

I really do not know and stand over 5hours to solve this problem,

I wonder about how to re-arrange, or how to refresh part of the 'pokerTable' part only..

Just refresh works and change the card randomly, but I have to click the

HTML

Demo the use of functions, arrays and object in JavaScript

Dealer

Js

"use strict";

const $ = (card) => document.getElementById(card);

const dealer = $("dealer");

const player = $("player");

const pokerTable = $("pokerTable");

// A deck of card has 4 suites and each suit has 13 values (4 x 13 = 52)

const suits = ["Spades", "Diamonds", "Club", "Heart"];

const values = [

"Ace",

"2",

"3",

"4",

"5",

"6",

"7",

"8",

"9",

"10",

"Jack",

"Queen",

"King",

];

const deck = [];

createDeckOfCards(); // 52 objects

const playerCards = getRandomCards(2);

const dealerCards = getRandomCards(2);

const tableCards = getRandomCards(5);

displayCards(player, playerCards);

displayCards(dealer, dealerCards);

displayCards(pokerTable, tableCards);

function createDeckOfCards() {

suits.forEach((suit) => {

for (let value of values) {

deck.push({ value, suit });

}

});

}

function getRandomCards(num) {

let randNum;

let returnArray = [];

for (let i = 0; i

randNum = Math.floor(Math.random() * deck.length);

returnArray.push(deck.splice(randNum, 1)[0]);

}

return returnArray;

}

function refresh() {

????????

//have to be re-arranged card randomly.

}

function displayCards(container, cards) {

let output = "",

images = "";

for (let item of cards) {

let { value, suit } = item; // destructuring object

output += `

${value} of ${suit}

`;

images += ` `;

}

container.innerHTML += output + images;

}