时间戳

首页 > 解决方案 > 第二次通过后阵列未重置

javascript - 第二次通过后阵列未重置

问题描述

我已经编写了代码，用户通过点击键盘上的 Enter 按钮来移动 switch 语句，直到到达数组的末尾。然后出现一个模式，要求用户单击一个按钮，如果他们希望重复该练习。单击按钮后，代码第一次运行良好，但任何后续尝试都显示代码被锁定在 else if 语句中，而没有像最初那样继续显示模态。我一直在不懈地努力让这件事发生，但我完全不知所措。建议？

我已经让代码正确运行和重置，但代价是模式在屏幕上保持打开状态。不可取/不可接受。

代码笔： https ://codepen.io/don199/pen/qBXXYdL ?editors=1111

    <div>Click in the blue area to gain focus, then hit the enter button on the keyboard to advance through the array.</div>
<div class="displayColor"></div>
<div class="modal-overlay"></div>
<button class='button'>yes</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="javascript/script.js"></script>
    
<script>
let colors = [0, 1, 2, 3];
let displayColor = document.querySelector('.displayColor');

function init(){
    let randNum = Math.floor(Math.random() * colors.length);
    num = colors[randNum];
    colors.splice(randNum, 1); 

    switch(num){
    case 0:
        displayColor.textContent = 'blue';
        break; 
    case 1: 
        displayColor.textContent = 'green';
        break;
    case 2:
        displayColor.textContent = 'yellow';
        break;
    case 3:
        displayColor.textContent = 'orange';
        break;
    }
}

document.addEventListener('keydown', function(e){
    if(e.keyCode == 13 && colors.length > 0){
        e.preventDefault();
        init();
    } else if(e.keyCode == 13 && colors.length < 1) {
        gsap.to(displayColor, 0,{autoAlpha: 0});
        showModal();
        
        console.log('empty array');
    }
})

let btn = document.querySelector('.button');
let tl_showModal = gsap.timeline();
    tl_showModal
        .reversed(true)
        
        .to(displayColor, 0,{autoAlpha: 0})
        .to('.modal-overlay', {duration: .5, autoAlpha: 1}, 0)
        .to(document.querySelector('.displayColor'), {autoAlpha: 1,textContent: 'Wanna go again?'})
        .to(btn,{autoAlpha: 1})
            
function showModal(){
    tl_showModal.play(); 

    btn.addEventListener('click', function(){
        if(colors.length === 0){
            gsap.to(btn,{autoAlpha: 0});
            gsap.to('.modal-overlay', {duration: .5, autoAlpha: 0});
            colors = [0,1,2,3];
            init();
       }       
    }) 
}   

init();

标签： javascript

解决方案

问题似乎是我在模态上使用的方法。我使用时间线将其打开，但随后让它消失以“关闭”它，而不是反转时间线（然而，简单地反转时间线会增加另一个令人头疼的世界）。通过消除时间线并将所有代码放在 showModal() 中，它可以按预期工作。

代码笔： https ://codepen.io/don199/pen/MWvVMbG

function showModal(){
gsap.to(displayColor, 0,{autoAlpha: 0});
gsap.to('.modal-overlay', {duration: .5, autoAlpha: 1});
gsap.to(document.querySelector('.displayColor'), {autoAlpha: 1,textContent: 'Wanna go again?'});
gsap.to(btn,{autoAlpha: 1});

btn.addEventListener('click', function(){
    if(colors.length === 0){
        gsap.to(btn,{autoAlpha: 0});
        gsap.to('.modal-overlay', {duration: .5, autoAlpha: 0});
        colors = [0,1,2,3];
        init();
    }       
})

}

推荐阅读