Question

更具体地说，我想做的是-每次按Enter键，都会向用户显示一个著名的报价（我的开关/箱）。一旦他们在列表中切换（在数组之外完成），他们将可以选择再次执行此操作（点击“是”按钮）。按下“是”按钮后，用户将再次切换数组，直到到达数组末尾。（然后，如果需要，他们可以选择再次执行所有操作）。当我将代码包装在一个函数中以通过单击按钮对该函数进行调用时，会发生问题。我似乎无法重新创建整个数组的切换过程。如前所述，正在发生的事情是每次按下Enter键都会一次又一次地创建数组。有什么想法吗？

<body>
    <p id='show'>When enter button pressed, <br>random case selections are<br>shown here until array emptied.</p>
    <button onclick="myFunction()">When clicking this button, I am wanting<br>the same response from the function call,<br>
        but my event listener keeps resetting my array. How to prevent that? </button>
    <script>
        myFunction();

        function myFunction() {
            var casesDrawn = [0, 1, 2];
            document.body.addEventListener('keyup', function(e) {
                if (e.keyCode == 13 && casesDrawn.length > 0) {
                    randSelect();
                }

                function randSelect() {
                    var randNum = Math.floor(Math.random() * casesDrawn.length);
                    var num = casesDrawn[randNum];
                    casesDrawn.splice(randNum, 1);

                    switch (num) {
                        case 0:
                            document.getElementById('show').innerHTML = 'case 1 selected';
                            break;
                        case 1:
                            document.getElementById('show').innerHTML = 'case 2 selected';
                            break;
                        case 2:
                            document.getElementById('show').innerHTML = 'case 3 selected';
                            break;
                    }
                }
            });
        }
    </script>
</body>

Answer 1

每当单击按钮时调用myFunction()，此行就会执行：

    var casesDrawn = [0, 1, 2];

因此，您实际上创建了一个新数组并附加了一个新的Click侦听器。您实际上想要的是创建一个全局变量caseDrawn和一个全局randSelect函数：

 var casesDrawn = [0, 1, 2];

 function randSelect() { /*...*/ }

 // Attach keyup listener
 document.body.addEventListener( 'keyup', function (e) {
        if ( e.keyCode == 13 && casesDrawn.length > 0) {
            randSelect();
        }
 });

 // Attach button listener

  document.querySelector("button").addEventListener("click", randSelect);

然后randSelect()在按键和单击按钮时被调用。

每次按键时都会重置阵列

1 个答案: