Why does my text briefly show up and then suddenly becomes invisible?

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

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>

Answer 2

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>