Soy un principiante, tratando de implementar un detector de eventos 'clic' para que aparezca un modal. Pero tan pronto como hago clic en el enlace, aparece el modal y desaparece al instante.
const btn = document.getElementById(btn"); const modal= document.getElementById("modal"); const showModal = function (el, modalId) { el.addEventListener("click", function () { modalId.classList.remove("hidden"); }); }; showModal(btn, modal); .hidden{ display: none } <a class='btn'> Click </a> <div id='modal' class='hidden'> Modal Content </div>debe definir id="btn" en su etiqueta para poder hacer document.getElementById("btn")
const btn = document.getElementById("btn"); const modal = document.getElementById("modal"); const showModal = function(el, modalId) { el.addEventListener("click", function() { modalId.classList.remove("hidden"); }); }; showModal(btn, modal); .hidden { display: none } <a id="btn"> Click </a> <div id='modal' class='hidden'> Modal Content </div>Muchas gracias chicos por responder. Encontré mi error, estaba usando la etiqueta 'enlace' con el atributo 'href' vacío, debido a que la página se recargaba cada vez que hacía clic en ella. Simplemente reemplacé los enlaces con la etiqueta del botón y ahora funciona bien.
Aunque todavía quiero saber si es posible evitar que la página se vuelva a cargar cuando se hace clic en el elemento del enlace.
Además, gracias por resaltar el error tipográfico 'class/id'.