Javascript 动态填充Div中数组的值

我正在创建一个函数，它可以根据用户在输入字段中提供的玩家数量来洗牌并向用户处理扑克牌组。我已经完成了洗牌功能，但我在处理卡时遇到了问题。如何根据html中给定的

number\u of \u people

值平均处理整个组，例如，如果

number\u of \u 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....

此外，如果用户插入的人数超过52人，则仍将进行交易和显示，但第53名及以上的玩家将空手，例如：

Person 53 : 
Person 54 : 
Person 55 : 

下面是我的代码：

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>

//创建分发卡的函数
函数shuffleCards（）{
//获取输入值
var number of theu people=document.getElementById（“number of theu people”）.value
//声明卡元素
常量卡片类型=[“S”、“D”、“C”、“H”]；
常量卡的值=[“A”、“2”、“3”、“4”、“5”、“6”、“7”、“8”、“9”、“X”、“J”、“Q”、“K”]；
//创建甲板阵列
让deck=[]；
//验证用户插入的值
if（人数>0和人数！==null）{
//制作一副牌
for（设i=0；i0；i--）{
设j=Math.floor（Math.random（）*i）；
设温度=甲板[i]；
甲板[i]=甲板[j]；
甲板[j]=温度；
}
//清晰内容
$（“.results”）.html（``）；
//分发卡片
for（设i=0；i${deck[i].cardTypes}-${deck[i].cardValue}，
`）；
}
}
否则{
$（“.results”）.html（`Input value不存在或value无效`）；
返回；
}
}

您可以将“分发卡片”循环替换为以下循环：

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(", ")
        )
    );
}

如果这两个条件中的第一个条件为真，那么第二个条件也始终为真，因此不需要第二个条件。此外，输入元素的

.value

属性决不是

null

，而是一个空字符串

您应该将输入从字符串转换为数字。例如，一元加号：

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

---

非常感谢您，先生，非常感谢您的建议。这是我第一次接触Math.ceil。我也会调查的

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