时间戳

首页 > 解决方案 > 每次按键都会重置数组

javascript - 每次按键都会重置数组

问题描述

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

<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>

标签： javascriptarraysaddeventlistener

解决方案

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

    var casesDrawn = [0, 1, 2];

因此，您实际上创建了一个新数组并附加了一个新的单击侦听器。您实际上似乎想要的是创建一个全局变量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()在按键和按钮点击时被调用。

推荐阅读