Random Playing Card Generator with vanilla javascript

Question

I have Five Cards for the Player and Five Cards for the Dealer Which on click or touch it generates random card from the playing card deck. I currently have Five different functions for a same function for each card because I have trouble making the functions into a Class that can be shared among all the cards.

This is the sample code for the function that is repeated for all the cards.

Please help me simplify my coding into One Class That can be shared for all the cards.

'''

function drawCard5() {

  var randomCard = Math.round(Math.random()* 52);
  if (randomCard === 0) {
    document.getElementById("card5").innerHTML = "A ♠️";
  }

  else if (randomCard === 1) {
    document.getElementById("card5").innerHTML = "2 ♠️";
  }

  else if (randomCard === 2) {
    document.getElementById("card5").innerHTML = "3 ♠️";
  }

  else if (randomCard === 3) {
    document.getElementById("card5").innerHTML = "4 ♠️";
  }

  else if (randomCard === 4) {
    document.getElementById("card5").innerHTML = "5 ♠️";
  }

  else if (randomCard === 5) {
    document.getElementById("card5").innerHTML = "6 ♠️";
  }

  else if (randomCard === 6) {
    document.getElementById("card5").innerHTML = "7 ♠️";
  }

  else if (randomCard === 7) {
    document.getElementById("card5").innerHTML = "8 ♠️";
  }

  else if (randomCard === 8) {
    document.getElementById("card5").innerHTML = "9 ♠️";
  }

  else if (randomCard === 9) {
    document.getElementById("card5").innerHTML = "10 ♠️";
  }

  else if (randomCard === 10) {
    document.getElementById("card5").innerHTML = "J ♠️";
  }

  else if (randomCard === 11) {
    document.getElementById("card5").innerHTML = "Q ♠️";
  }


  else if (randomCard === 12) {
    document.getElementById("card5").innerHTML = "K ♠️";
  }


  else if (randomCard === 13) {
    document.getElementById("card5").innerHTML = "A ♥️";
  }

  else if (randomCard === 14) {
    document.getElementById("card5").innerHTML = "2 ♥️";
  }

  else if (randomCard === 15) {
    document.getElementById("card5").innerHTML = "3 ♥️";
  }

  else if (randomCard === 16) {
    document.getElementById("card5").innerHTML = "4 ♥️";
  }

  else if (randomCard === 17) {
    document.getElementById("card5").innerHTML = "5 ♥️";
  }

  else if (randomCard === 18) {
    document.getElementById("card5").innerHTML = "6 ♥️";
  }

  else if (randomCard === 19) {
    document.getElementById("card5").innerHTML = "7 ♥️";
  }

  else if (randomCard === 20) {
    document.getElementById("card5").innerHTML = "8 ♥️";
  }

  else if (randomCard === 21) {
    document.getElementById("card5").innerHTML = "9 ♥️";
  }

  else if (randomCard === 22) {
    document.getElementById("card5").innerHTML = "10 ♥️";
  }

  else if (randomCard === 23) {
    document.getElementById("card5").innerHTML = "J ♥️";
  }

  else if (randomCard === 24) {
    document.getElementById("card5").innerHTML = "Q ♥️";
  }

  else if (randomCard === 25) {
    document.getElementById("card5").innerHTML = "K ♥️";
  }

  else if (randomCard === 26) {
    document.getElementById("card5").innerHTML = "A ♣️";
  }

  else if (randomCard === 27) {
    document.getElementById("card5").innerHTML = "2 ♣️";
  }

  else if (randomCard === 28) {
    document.getElementById("card5").innerHTML = "3 ♣️";
  }

  else if (randomCard === 29) {
    document.getElementById("card5").innerHTML = "4 ♣️";
  }

  else if (randomCard === 30) {
    document.getElementById("card5").innerHTML = "5 ♣️";
  }

  else if (randomCard === 31) {
    document.getElementById("card5").innerHTML = "6 ♣️";
  }

  else if (randomCard === 32) {
    document.getElementById("card5").innerHTML = "7 ♣️";
  }

  else if (randomCard === 33) {
    document.getElementById("card5").innerHTML = "8 ♣️";
  }

  else if (randomCard === 34) {
    document.getElementById("card5").innerHTML = "9 ♣️";
  }

  else if (randomCard === 35) {
    document.getElementById("card5").innerHTML = "10 ♣️";
  }

  else if (randomCard === 36) {
    document.getElementById("card5").innerHTML = "J ♣️";
  }

  else if (randomCard === 37) {
    document.getElementById("card5").innerHTML = "Q ♣️";
  }

  else if (randomCard === 38) {
    document.getElementById("card5").innerHTML = "K ♣️";
  }

  else if (randomCard === 39) {
    document.getElementById("card5").innerHTML = "A ♦️";
  }
  else if (randomCard === 40) {
    document.getElementById("card5").innerHTML = "2 ♦️";
  }

  else if (randomCard === 41) {
    document.getElementById("card5").innerHTML = "3 ♦️";
  }
  else if (randomCard === 42) {
    document.getElementById("card5").innerHTML = "4 ♦️";
  }
  else if (randomCard === 43) {
    document.getElementById("card5").innerHTML = "5 ♦️";
  }


  else if (randomCard === 44) {
    document.getElementById("card5").innerHTML = "6 ♦️";
  }
  else if (randomCard === 45) {
    document.getElementById("card5").innerHTML = "7 ♦️";
  }
  else if (randomCard === 46) {
    document.getElementById("card5").innerHTML = "8 ♦️";
  }
  else if (randomCard === 47) {
    document.getElementById("card5").innerHTML = "9 ♦️";
  }
  else if (randomCard === 48) {
    document.getElementById("card5").innerHTML = "10 ♦️";
  }
  else if (randomCard === 49) {
    document.getElementById("card5").innerHTML = "J ♦️";
  }
  else if (randomCard === 50) {
    document.getElementById("card5").innerHTML = "Q ♦️";
  }
  else if (randomCard === 51) {
    document.getElementById("card5").innerHTML = "K ♦️";
  }
  else if (randomCard === 52) {
    document.getElementById("card5").innerHTML = "JK 🤡";
    audio2.play();
    audio3.play();
    document.getElementById("playercard").innerHTML = "Player Wins!"
    document.addEventListener("click", handler, true);
    restartGame();
  }
}
  

Answer 1

You can create list of card first. And then get the card by index of the list.

const createCardList = () => {
    let cardList = []
    let suits = "♠♥♣♦"
    let number = "A123456789JQK"
    
    for (let i=0; i<suits.length; i++) {
        for (let j=0; j<number.length; j++) {
            let card = ""
            card += suits[i] + " " + number[j]
            cardList.push(card)
        }
    }
    return cardList
}

const getCard = () => {
    let cardList = createCardList()
    let random = Math.round(Math.random() * 52);
    
    return cardList[random]
}

console.log(getCard())