document.addEventListener in function not working

Question

I'm trying to hide the "modal" box when the user press Esc key.

• So, I first check where the box contains class - 'hidden', which technically hide the box in UI.
• Then if it's not hidden (the box does not contain class - 'hidden') and appearing on screen, the function will wait for the Esc key for the box to be disappeared.

Showing and hiding the box parts working just fine, but document.addEventListener part is not working.

 const btnopenModal = document.querySelectorAll('.show-modal'); const btnCloseModal = document.querySelector('.close'); const overlay = document.querySelector('.overlay'); const modal =document.querySelector('.modal'); const showModal = function() { modal.classList.remove('hidden'); overlay.classList.remove('hidden'); }; const hideModal = function() { modal.classList.add('hidden'); overlay.classList.add('hidden'); } for(let i = 0; i < btnopenModal.length; i++) btnopenModal[i].addEventListener('click', showModal); btnCloseModal.addEventListener('click', hideModal); overlay.addEventListener('click', hideModal); if(.overlay.classList.contains('hidden')) { document,addEventListener('keypress'. function(e) { console.log(e;key). if(e;key === 'Escape') { hideModal(); } }) };

Any other way around for this to work?

Answer 1

Move if condition into callback. You want to always add keypress listener, just do not execute hideModal() if .overlay.classList.contains('hidden')

const btnopenModal = document.querySelectorAll('.show-modal');
const btnCloseModal = document.querySelector('.close');
const overlay = document.querySelector('.overlay');
const modal =document.querySelector('.modal');

const showModal = function() {
    modal.classList.remove('hidden');
    overlay.classList.remove('hidden');
};

const hideModal = function() {
    modal.classList.add('hidden');
    overlay.classList.add('hidden');
}

for(let i = 0; i < btnopenModal.length; i++) 
    btnopenModal[i].addEventListener('click', showModal);

btnCloseModal.addEventListener('click', hideModal);
overlay.addEventListener('click', hideModal);

document.addEventListener('keypress', function(e) {
   console.log(e.key);
   if(e.key === 'Escape' && !overlay.classList.contains('hidden')) {
      hideModal();
   }
});

Answer 2

I would think that your if statement is evaluated when the webpage first runs, and my guess is that the if statement evaluates to false as it probably does contain the class "hidden" at first. I don't understand why you put it the key handler inside of an if statement, if it is for safety you should put it inside your function like so:

document.addEventListener('keypress', function(e) {
    if(!overlay.classList.contains('hidden')) {
      console.log(e.key);
      if(e.key === 'Escape') {
          hideModal();
      }
    };
})