Tengo un problema con con JavaScript y CSS. Estoy intentando agregar dos funciones similares en las que al hacer click se muestren ciertos elementos (un menú tipo hamburguesa y por otro lado, una imagen), y al dar click en un botón de cerrar, el efecto desaparece. Sin embargo, parece que hay conflictos entre las funciones ya que por separado trabajan a la perfección pero juntas, como las necesito, no lo hacen.
Estoy colocando las funciones directamente en el HTML, no sé si por ahí pueda estar el problema, estos son mis códigos:
EL primero es un menú tipo hamburguesa que al dar click sobre la imagen se despliegan las diferentes secciones:
<script>
const mainMenu = document.querySelector('.mainMenu');
const closeMenu = document.querySelector('.closeMenu');
const openMenu = document.querySelector('.openMenu');
openMenu.addEventListener('click',show);
closeMenu.addEventListener('click',close);
function show(){
mainMenu.style.display = 'flex';
mainMenu.style.top = '0';
}
function close(){
mainMenu.style.top = '-100%';
}
</script>
Y este es un texto al que dándole click se abre una imagen con un efecto popup
:
<script>
const open = document.getElementById('open');
const modal_container = document.getElementById 'modal_container');
const close = document.getElementById('modal_container');
open.addEventListener ('click', () => {
modal_container.classList.add('show');
});
close.addEventListener ('click', () => {
modal_container.classList.remove('show');
});
</script>
Quiero señalar que mis funciones están en archivos diferentes, con archivos CSS distintos pero todo dentro de un mismo proyecto. El menú de hamburguesa esta en un archivo partial
que es mi header.ejs el cual se repite en todas las páginas del proyecto mientras que la imagen con efecto Popup
solamente esta en un archivo (producto.ejs) y aún así afecta al resto. ¿Mi problema esta en en la lógica de java o en el CSS? Como lo mencioné anteriormente si borro o comento una de las funciones la otra trabaja bien pero intentando colocar ambas sólo funciona una 😥. Espero me puedan ayudar.