I have written code where the user moves through a switch statement by hitting the enter button on the keyboard until the end of the array is reached. Then a modal appears asking the user to click on a button if they wish to repeat the exercise. After clicking the button the code works fine the first time through, but any subsequent attempt shows the code being locked-up within an else if statement without going on to showing the modal as it had done at first. I have tried relentlessly to get this to go but I am at a total loss. Suggestions?
I had gotten the code to run and reset properly, but at the cost of the modal remaining open on the screen. Not desirable/acceptable.
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();
It looks like the array is actually resetting, the problem has to do with setup of tl_showModal only happening once on initialization. What fixes the problem is to move the tl_showModal setup into the init function. So you code would look something like this
<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();
The problem seemed to be the approach I used on the modal. I used a timeline to open it, but then made it disappear to 'close' it, rather than reversing the timeline (simply reversing the timeline, however, added a whole other world of headache). By eliminating the timeline and placing all the code in showModal(), it worked as desired.
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();
}
})
}