How can I change the color of an element of an array with javascript?

I have to generate a random poker card with html/javascript/css. How do I make the hearts and diamonds appear red? this is my code

window.onload = function() {
  let generateRandomNumber = () => {
    let numbers = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];
    let indexNumber = Math.floor(Math.random() * numbers.length);
    return numbers[indexNumber];
  };
  let generateRandomSuit = () => {
    let suits = ["♦", "♥", "♠", "♣"];
    let indexSuit = Math.floor(Math.random(suits) * suits.length);
    return suits[indexSuit];
  };
  document.querySelector("#number").innerHTML = generateRandomNumber();

  var allSuits = generateRandomSuit();
  document.querySelector("#top").innerHTML = allSuits;
  document.querySelector("#bottom").innerHTML = allSuits;
};

>Solution :

Set the class of the element depending on the suit symbol depending on the suit.

var allSuits = generateRandomSuit();
document.querySelector("#top").innerHTML = allSuits;
document.querySelector("#bottom").innerHTML = allSuits;
let colorClass = allSuits == '♦' || allSuits == '♥' ? 'red' : 'black';
document.querySelector("#top").classList.add(colorClass);
document.querySelector("#bottom").classList.add(colorClass);

.red {
  color: red;
}

.black {
  color: black;
}