随机数组元素创建成Dom只一次JavaScript

Question

我在将随机数组元素插入 DOM 时遇到问题。我希望它只为每个数组元素执行一次，但代码会无限地获取元素。

我正在玩纸牌游戏，希望代码理解我正在从牌组中挑选一张纸牌，因此它应该将其从数组中删除。但当我单击按钮时，它会继续运行并一遍又一遍地重复相同的卡片。该按钮应该只随机抽一张牌。

代码如下：

<!DOCTYPE html>

<html>
    <head>

    <title>TEST</title>

    <style>
    .testDivExe{
        border: 0.1em dashed black;
        
        width: 100%;

        background-color: rgb(192,192,192,0.6);
    }
    
    body{
        border: 0.1em dotted black;
        
        font-family: impact;
        font-size: 2em;
        background-color: rgb(192,192,192,0.4);
    }
    </style>
    </head>


    <header>
        <h1>ZONE</h1>
    </header>


    <body>
        <div class="testDivExe" id="testDivExeId">
            <button id="testClickId">click</button>
        <div>

    <footer>
    </footer>

    <script>
    //TEST1
    document.getElementById("testClickId").onclick = function testFunc1(){
        // RAND AND ARR
        var array1 = ["Hello", "There", "Some", "Things", "Never", "Change",];
    
    
        
        var deal = function(){
            var index = Math.floor(Math.random() * array1.length);
            var card = array1[index];
            array1.splice(index, 1);
            return card;        
        };

        // PER&CRE
        var object = document.createElement('p');
        object.innerHTML = deal(array1);

        //REND
        document.getElementById("testDivExeId").appendChild(object);
        
        return false;
    };

    </script>
    </body>
</html>

Answer 1

每次单击按钮时都会创建

array1。您必须以保留其当前值的方式存储 array1。您可以在全局范围内声明 array1 或将数组存储在浏览器内存中。您实际上应该从阵列中删除该卡（我建议您使用 filter 而不是 splice）。最后确保仅当至少存在一张卡片时才创建新的 <p>。

<script>
    //TEST1

    // RAND AND ARR
    var array1 = ["Hello", "There", "Some", "Things", "Never", "Change",];

    document.getElementById("testClickId").onclick = function testFunc1() {
        if (array1.length === 0) // Check if exists any card.
            return;
        var deal = function () {
            var index = Math.floor(Math.random() * array1.length);
            var card = array1[index];
            array1 = array1.filter(c => c !== card); // Remove the card
            return card;
        };

        // PER&CRE
        var object = document.createElement('p');
        object.innerHTML = deal(array1);

        //REND
        document.getElementById("testDivExeId").appendChild(object);

        return false;
    };

</script>

随机数组元素创建成Dom只一次JavaScript

Random array element creation into Dom only once JavaScript

javascript

arrays

random

dom