Building a deck of cards

I'm able to display the cards box with one logo of suit (clubs) but rest is not visible.

this is the site where it's explaining how to create a deck with rendering as well https://devdojo.com/devdojo/create-a-deck-of-cards-in-javascript

heres my version of code

/* Creating Card object */

function createCard(value, suit) {

this.value = value;
this.suit = suit;

}

/* Creating deck with 52 cards */

function createDeck() {

this.value = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];

this.suit = ['Spades', 'Diamonds', 'Hearts', 'Clubs'];

var cards = [];

for (var s = 0; s < this.suit.length; s++)
{
    for (var v = 0; v < this.value.length; v++)
    {
        cards.push (new createCard (v+1, this.value[v], this.suit[s] ));
    }
}

return cards;

}

var cardDeck = new createDeck(); console.log (cardDeck);

window.onload = function () { for (var i = 0; i < cardDeck.length; i++) { div = document.createElement('div'); div.className = 'card';

    if (cardDeck[i].suit == 'Spades')
    {
        var ascii_char = '♠';
    }
    else if (cardDeck[i].suit == 'Diamonds')
    {
        var ascii_char = '♦';
    }
    else if (cardDeck[i].suit == 'Hearts')
    {
        var ascii_char = '♥';
    }
   else
    {
        var ascii_char = '♣';
    }

    /*{
        var ascii_char = '&' + cardDeck[i].suit.toLowerCase() + ';'
    }*/
    div.innerHTML = '<span class = "number">' + cardDeck[i].value + '</span><span class = "suit">' + ascii_char + "</span>";
    document.body.appendChild(div);
}    

}