He escrito un código en el que el usuario se mueve a través de una declaración de cambio presionando el botón Intro en el teclado hasta que se alcanza el final de la matriz. Luego aparece un modal que le pide al usuario que haga clic en un botón si desea repetir el ejercicio. Después de hacer clic en el botón, el código funciona bien la primera vez, pero cualquier intento posterior muestra que el código está bloqueado dentro de una declaración else if sin mostrar el modal como lo había hecho al principio. He intentado incansablemente que esto funcione, pero estoy totalmente perdido. ¿Sugerencias?
Logré que el código se ejecutara y se reiniciara correctamente, pero a costa de que el modal permaneciera abierto en la pantalla. No deseable/aceptable.
Codepen: 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();Parece que la matriz en realidad se está reiniciando, el problema tiene que ver con la configuración de tl_showModal que solo ocurre una vez en la inicialización. Lo que soluciona el problema es mover la configuración de tl_showModal a la función de inicio. Así que tu código se vería así
<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'); let btn = document.querySelector('.button'); let tl_showModal = gsap.timeline(); function init(){ let randNum = Math.floor(Math.random() * colors.length); num = colors[randNum]; colors.splice(randNum, 1); 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}) 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'); } }) 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();El problema parecía ser el enfoque que utilicé en el modal. Utilicé una línea de tiempo para abrirlo, pero luego lo hice desaparecer para 'cerrarlo', en lugar de invertir la línea de tiempo (simplemente invertir la línea de tiempo, sin embargo, agregó otro mundo de dolores de cabeza). Al eliminar la línea de tiempo y colocar todo el código en showModal(), funcionó como se deseaba.
Codepen: 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(); } })}