Dynamically populate value of array in a Div

Question

I'm creating an function that can shuffle and deal poker deck to user based on number of player provided by the user in a input field. I've completed the shuffling function but I'm having issue with dealing the card. How can I deal the entire deck equally based on the number_of_people value given in html, for example if the number_of_people = 3 :

Person 1 : S-Q, D-J, D-K, C-7, S-J....
Person 2 : H-6, D-X, D-A, H-2, S-6....
Person 3 : D-Q, H-5, D-8, S-2, S-8....

also if user insert more than 52 number_of_people it will still deal and display but the 53rd and above player will have an empty hand e.g :

Person 53 : 
Person 54 : 
Person 55 : 

Below is my code :

HTML :

    <div class="position-ref full-height">

        <div class="content">
            <div class="title m-b-md">
                Let's Play
            </div>

            <div>
                <input id="number_of_people" type="number" max="99" placeholder="No. of People"></input>
                <button onclick="shuffleCards()">Shuffle</button>
            </div>

            <div class="results">
            </div>
        </div>

Javascript :

    // Create a function to distribute card
    function shuffleCards() {
        // Get input value
        var number_of_people = document.getElementById("number_of_people").value

        // Declare card elements
        const card_types = ["S", "D", "C", "H"];
        const card_values = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "X", "J", "Q", "K",];

        // Create deck array
        let deck = [];
        
        // Validate the value inserted by user
        if (number_of_people > 0 && number_of_people !== null) {
            // Create a deck of cards
            for (let i = 0; i < card_types.length; i++) {
                for (let x = 0; x < card_values.length; x++) {
                    let card = { cardValue: card_values[x], cardTypes: card_types[i] };
                    deck.push(card);
                }
            }

            // Shuffle the cards
            for (let i = deck.length - 1; i > 0; i--) {
                let j = Math.floor(Math.random() * i);
                let temp = deck[i];
                deck[i] = deck[j];
                deck[j] = temp;
            }

            // Clear content
            $(".results").html(``);

            // Distribute the card
            for (let i = 0; i < deck.length; i++) {
                console.log(`${deck[i].cardTypes}-${deck[i].cardValue}`)
                $(".results").append( `<p>${deck[i].cardTypes}-${deck[i].cardValue}, </p>` );
            }
        }

        else {
            $(".results").html( `<h3>Input value does not exist or value is invalid</h3>` );
            return;
        }
        
    }
</script>

Answer 1

You can replace the "Distribute the cards" loop, with the following loop:

for (let person = 0; person < number_of_people; person++) {
    $(".results").append(
        $("<p>").append(
            `Person ${person+1}: `,
            deck.splice(-Math.ceil(deck.length / (number_of_people - person))).map(card =>
                `${card.cardTypes}-${card.cardValue}`
            ).join(", ")
        )
    );
}

This actually extracts the right amount of cards from the end of the deck in one go, and displays them on a single line. Since the deck of cards is shuffled, it doesn't matter from where in the deck you pull the cards, so you might as well do it like this.

A remark about your code:

if (number_of_people > 0 && number_of_people !== null) {

If the first of these two conditions is true, then the second is always true as well, so there is no need to have that second condition. Moreover, the .value property of an input element is never null, but potentially an empty string.

You should really convert the input from string to a number. For instance with the unary plus:

var number_of_people = +document.getElementById("number_of_people").value;