Quiero manipular clases agregando un eventlistener a dos elementos (.close y .overlay).

Intenté hacer esto con el querySelector:

 document.querySelector('.close, .overlay').addEventListener('click', function() { document.querySelector('.menu').classList.remove('slide-in'); document.querySelector('.overlay').classList.add('hide'); });

Por alguna razón, .overlay se ignora sin importar si viene antes o después de la clase .close.

El código anterior solo funciona cuando se repite para cada clase:

 document.querySelector('.overlay').addEventListener('click', function() { document.querySelector('.menu').classList.remove('slide-in'); document.querySelector('.overlay').classList.add('hide'); }); document.querySelector('.close').addEventListener('click', function() { document.querySelector('.menu').classList.remove('slide-in'); document.querySelector('.overlay').classList.add('hide'); });

Lo cual me parece excesivo.

Encontré estas respuestas , que sugieren usar getElementsByClassName o querySelectorAll, pero ninguna parece funcionar para mí.

¿Puede alguien ayudarme a averiguar qué está mal?

HTML:

 <div class="open">Open menu</div> <div class="menu"> <p class="close">Close menu</p> </div> <div class="overlay hide"></div>

CSS:

 .menu { display: block; width: 60vw; height: 100vh; position: fixed; top: 0; left: 0; } .menu .close { text-align: right; font-size: 1.5rem; } .slide-in { -webkit-transform: translateX(40vw); transform: translateX(40vw); } .hide { display: none; } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 120%; background-color: rgba(0, 0, 0, 0.6); z-index: 50; }