Text not re-displaying on click of button

Question

I'm trying to create a function where when you click the button, it displays a piece of text, and then when you press the button again, it gets rid of the text. For some reason it's not working. What am I doing wrong, and how could I fix it? As you can see, I'm trying to make the button change to a value of "block" when pressing the button.

I've tried changing color of text instead when on click, but that does not work.

  function myFunction() {
        
      var x = document.getElementById("latebat");
      
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
      
    }

 <button onclick="myFunction()">Click me</button>    
 <div id="latebat">
 <a style=color:white;display:none>Ӏąէҽҍąէ was here</a>
 </div>  

I expect the output to display the text once clicked.

Answer 1

I hope this will help check out my answer:

function myFunction() {
  var x = document.getElementById("latebat");
  if (x.style.display === "none") {
    x.style.display = "block";
    
  } else {
    x.style.display = "none";
  }
}

<button onclick="myFunction()">Click me</button>
<div>
<a  id="latebat" style="color:black;display:none;">Ӏąէҽҍąէ was here</a>
</div>

Alternate solution:

 function myFunction() {        
 var x = document.getElementById("latebat");
 if (x.style.display === "none") {
    x.style.display = "block";
    } else {
    x.style.display = "none";
    }
 }

<button onclick="myFunction()">Click me</button>    
<div id="latebat" style="display:none">
<a style=color:black;>Ӏąէҽҍąէ was here</a>
</div>