After finishing the program, the "textContent" disappears quickly. My intention was to stay on the screen

Question

let idadeA = document.querySelectorAll("#idadeA");


function acerteIdade(event) {
  let idadeNum = event.target.textContent;
  console.log(idadeNum)
  let outResposta = document.querySelector("#outResposta");

  if (idadeNum == '28') {
    alert('Parabéns, voçê acertou!!!')
    outResposta.textContent = `Parabéns, voçê acertou minha idade!!!`;
  } else {
    alert('errou')
    outResposta.textContent = `Voçê errou, recarregue a página e tente novamente!!!`;
  }
}
idadeA.forEach(idadeAll => {
  idadeAll.addEventListener("click", acerteIdade)
});

<div class="container-cont">
  <h1></h1>
  <p>Qual Minha idade?:

  </p>
  <ul>
    <a href="">
      <li id="idadeA">18</li>
    </a>
    <a href="">
      <li id="idadeA">19</li>
    </a>
    <a href="">
      <li id="idadeA">20</li>
    </a>
    <a href="">
      <li id="idadeA">21</li>
    </a>
    <a href="">
      <li id="idadeA">22</li>
    </a>
    <a href="">
      <li id="idadeA">23</li>
    </a>
    <a href="">
      <li id="idadeA">24</li>
    </a>
    <a href="">
      <li id="idadeA">25</li>
    </a>
    <a href="">
      <li id="idadeA">26</li>
    </a>
    <a href="">
      <li id="idadeA">27</li>
    </a>
    <a href="">
      <li id="idadeA">28</li>
    </a>
    <a href="">
      <li id="idadeA">29</li>
    </a>
    <a href="">
      <li id="idadeA">30</li>
    </a>
  </ul>
  <h3 id="outResposta"></h3>
</div>

Answer 1

There are some errors in your code:

• Misuse of the global attribute id:
  The global id attribute defines an identifier exclusive (ID) that must be unique throughout the document. Its purpose is to identify the element when browsing by anchors (using a fragment identifier), when using scripts or styling (with CSS).
• Element use <a> as the direct child of the element [<ul>]3:
  Even if the result obtained on your page is what you want, semantically it is a mistake to put the anchor (element <a>) within the unordered list (element <ul>). At the moment browsers are not rigid about this restriction but as browser manufacturers conform to the W3C standard, this tolerance can be revoked and your page will inevitably stop working. The only elements contained in an element <ul> must be <li>, <script> and <template>.
• Use of the element <li> as the direct child of the element <a>:
  Even if the result obtained on your page is what you want, semantically it is a mistake to put the list item (element <li>) inside the anchor(element <a>). The content of <a> must be or Flow Content, or Phrasing or Interactive Content. At the moment browsers are not rigid about this restriction but as browser manufacturers conform to the W3C standard, this tolerance can be revoked and your page will inevitably stop working.
• Abuse of anchorages(element <a>):
  Anchor elements are often used as false buttons, defining their attribute href as # or javascript:void(0) to prevent the page from being updated and then listen to your click events.
  These false values of href cause unexpected behavior when copying, dragging links, opening links in a new tab/window, bookmarking, or when Javascript is loading. They also transmit incorrect semantics to assistive technologies such as screen readers.
  Use a <button> instead. In general, you should only use a hyperlink to navigate to a real URL.
• Misuse of header elements:
  Header elements(elements of <h1>...<h6>) should be used to briefly describe the topic of the section you are in. Do not use them to format text, so use the properties CSS for styling text.

Knowing this is your code with some semantic corrections in HTML, a polished javascript code and the application of CSS styles.

let idadeA = document.querySelectorAll(".idadeA");
let outResposta = document.querySelector("#outResposta");

function acerteIdade(event) {
  let idadeNum = event.target.textContent;
  if (idadeNum == '28') {
    alert('Parabéns, você acertou!!!');
    outResposta.textContent = `Parabéns, você acertou minha idade!!!`;
  } else {
    alert('errou');
    outResposta.textContent = `Você errou, tente novamente!!!`;
  }
}

idadeA.forEach(idadeAll => {
  idadeAll.addEventListener("click", acerteIdade);
});

.idadeA {
  background: none;
  border: none;
  display: inline;
  font: inherit;
  margin: 0;
  padding: 0;
  outline: none;
  outline-offset: 0;
  color: blue;
  cursor: pointer;
  text-decoration: underline;
}

#outResposta {
  font-size: 16pt;
  font-weight: bold;
}

<div class="container-cont">
  <p>Qual Minha idade?:</p>
  <ul>
    <li><button class="idadeA">18</button></li>
    <li><button class="idadeA">19</button></li>
    <li><button class="idadeA">20</button></li>
    <li><button class="idadeA">21</button></li>
    <li><button class="idadeA">22</button></li>
    <li><button class="idadeA">23</button></li>
    <li><button class="idadeA">24</button></li>
    <li><button class="idadeA">25</button></li>
    <li><button class="idadeA">26</button></li>
    <li><button class="idadeA">27</button></li>
    <li><button class="idadeA">28</button></li>
    <li><button class="idadeA">29</button></li>
    <li><button class="idadeA">30</button></li>
  </ul>
  <span id="outResposta"></span>
</div>

Answer 2

As for the main problem (there are several), the information is not getting on the screen because you are using a tag <a>, as can be seen in documentation a hyperlink is created, a link to specified content within the attribute href, as in your example this attribute is empty, is reloaded the screen.

Otherwise there are more problems in your code:

Attributes id repeating itself in the Html document, which is not recommended, which can be solved using classes

You have a function with parameter, so when you run it in addEventListener() will have to pass the parameter, which will be exactly the event value of addeventlistener

Not to be a nuisance, but the word you is without ç

let idadeA = document.querySelectorAll('.idadeA');


function acerteIdade(event) {
  let idadeNum = event;
  let outResposta = document.querySelector('#outResposta');

  if (idadeNum === '28') {
    alert('Parabéns, você acertou!!!')
    outResposta.textContent = `Parabéns, você acertou minha idade!!!`;
  } else {
    alert('errou')
    outResposta.textContent = `Você errou, recarregue a página e tente novamente!!!`;
  }
}

idadeA.forEach(idadeAll => {
  idadeAll.addEventListener('click', function(e) {
    acerteIdade(e.target.textContent);
  })
});

<div class="container-cont">
  <h1></h1>
  <p>Qual Minha idade?:

  </p>
  <ul>
    <a href="#">
      <li class="idadeA">18</li>
    </a>
    <a href="#">
      <li class="idadeA">19</li>
    </a>
    <a href="#">
      <li class="idadeA">20</li>
    </a>
    <a href="#">
      <li class="idadeA">21</li>
    </a>
    <a href="#">
      <li class="idadeA">22</li>
    </a>
    <a href="#">
      <li class="idadeA">23</li>
    </a>
    <a href="#">
      <li class="idadeA">24</li>
    </a>
    <a href="#">
      <li class="idadeA">25</li>
    </a>
    <a href="#">
      <li class="idadeA">26</li>
    </a>
    <a href="#">
      <li class="idadeA">27</li>
    </a>
    <a href="#">
      <li class="idadeA">28</li>
    </a>
    <a href="#">
      <li class="idadeA">29</li>
    </a>
    <a href="#">
      <li class="idadeA">30</li>
    </a>
  </ul>
  <h3 id="outResposta"></h3>
</div>