为什么我的文字会短暂显示，然后突然变得不可见？

Question

I have a button that, when clicked, reveals hidden text by changing its CSS display property to "block". However, when I click the button, the text briefly shows up and then immediately disappear afterwards. How do I fix this?

 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>

Answer 1

The problem is that href="" reloads the page. You may want to use href="#" or make the button an actual button.

 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>

Answer 2

This happens because when you click on the Contacts button, the page reloads. And this happens because the A tag surrounding your button has the empty href="" attribute, which tells the site to reload the page when the button is clicked, you can fix this by adding href="#". Also rewrote your code a bit, besides the div tag with id="header_container" didn't have a closing tag.

 #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>