Tengo un botón que, cuando se hace clic, revela texto oculto al cambiar su propiedad de visualización CSS a "bloquear". Sin embargo, cuando hago clic en el botón, el texto aparece brevemente y luego desaparece inmediatamente. ¿Cómo puedo solucionar esto?
const contactPopUp = document.getElementById("contactButton"); const exitButton = document.getElementById("exit"); function showPopUp() { document.getElementById("contacts").style.cssText = "display: block; position: absolute; top: 30%; right: 40%; background-color: rgb(0, 0, 119); font - family: verdana, sans - serif; color: white; padding: 30 px;"; } function closePopUp() { document.getElementById("contacts").style.display = "none"; } contactPopUp.addEventListener("click", showPopUp); exitButton.addEventListener("click", closePopUp); #contacts { display: none; position: absolute; top: 30%; right: 40%; background-color: rgb(0, 0, 119); font-family: verdana, sans-serif; color: white; padding: 30px; } #contact_list { display: block; font-family: verdana, sans-serif; color: white; } <div id="header_container"> <ul> <li id="homepage_name">text</li> <li><a href="">Home</a></li> <li><a href="">About us</a></li> <li><a id="contactButton" href="">Contacts</a></li> </ul> </div> <div id="contacts"> You may contact us at: <button id="exit">X</button> <ul> <li id="contact_list">Insert Contacts Here.</li> <li id="contact_list">Insert Contacts Here.</li> <li id="contact_list">Insert Contacts Here.</li> </ul> </div>El problema es que href="" recarga la página. Es posible que desee utilizar href="#" o convertir el botón en un botón real.
const contactPopUp = document.getElementById("contactButton"); const exitButton = document.getElementById("exit"); function showPopUp() { document.getElementById("contacts").style.cssText = "display: block; position: absolute; top: 30%; right: 40%; background-color: rgb(0, 0, 119); font - family: verdana, sans - serif; color: white; padding: 30 px;"; } function closePopUp() { document.getElementById("contacts").style.display = "none"; } contactPopUp.addEventListener("click", showPopUp); exitButton.addEventListener("click", closePopUp); #contacts { display: none; position: absolute; top: 30%; right: 40%; background-color: rgb(0, 0, 119); font-family: verdana, sans-serif; color: white; padding: 30px; } #contact_list { display: block; font-family: verdana, sans-serif; color: white; } <div id="header_container"> <ul> <li id="homepage_name">text</li> <li><a href="">Home</a></li> <li><a href="">About us</a></li> <li> <a id="contactButton" href="#">Contacts</a> <!-- <button id="contactButton">Contacts</a> --> </li> </ul> <div id="contacts"> You may contact us at: <button id="exit">X</button> <ul> <li id="contact_list">Insert Contacts Here.</li> <li id="contact_list">Insert Contacts Here.</li> <li id="contact_list">Insert Contacts Here.</li> </ul>Esto sucede porque cuando hace clic en el botón Contactos, la página se vuelve a cargar. Y esto sucede porque la etiqueta A que rodea su botón tiene el atributo href="" vacío, que le dice al sitio que vuelva a cargar la página cuando se hace clic en el botón. Puede solucionar esto agregando href="#". También reescribió un poco su código, además de que la etiqueta div con id="header_container" no tenía una etiqueta de cierre.
#contacts { display: none; } #contacts._active { display: block; position: absolute; top: 30%; right: 40%; background-color: rgb(0, 0, 119); font-family: verdana, sans-serif; color: white; padding: 30px; } #contact_list { display: block; font-family: verdana, sans-serif; color: white; } </style> <div id="header_container"> <ul> <li id="homepage_name">text</li> <li><a href="">Home</a></li> <li><a href="">About us</a></li> <li><a id="contactButton" href="#">Contacts</a></li> </ul> <div id="contacts"> You may contact us at: <button id="exit">X</button> <ul> <li id="contact_list">Insert Contacts Here.</li> <li id="contact_list">Insert Contacts Here.</li> <li id="contact_list">Insert Contacts Here.</li> </ul> </div> <script> const contactPopUp = document.getElementById("contactButton"); const exitButton = document.getElementById("exit"); contactPopUp.addEventListener("click", function() { document.getElementById("contacts").classList.add("_active"); }); exitButton.addEventListener("click", function() { document.getElementById("contacts").classList.remove("_active"); }); </script>