单击按钮时不会重新显示文本

Question

我正在尝试创建一个功能，当您单击该按钮时，它会显示一段文本，然后当您再次按下该按钮时，它会删除该文本。由于某种原因，它不起作用。我做错了什么，我该如何解决？如您所见，我试图在按下按钮时将按钮更改为 "block" 的值。

我试过在单击时更改文本颜色，但这不起作用。

  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>

我希望在单击后输出显示文本。

Answer 1

我希望这有助于检查我的答案：

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>

替代解决方案：

 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>

Answer 2

您有两个具有相同 ID 的 div 元素，因此请删除一个或更改 ID。

您通过 document.getElementById("latebat") 调用了 div 元素的样式，但您已将样式设置为 anchor 标记。

我想是因为 style="color:white" 你看不到文本是因为背景是白色的。

查看@Amaresh S M 的解决方案

单击按钮时不会重新显示文本

Text not re-displaying on click of button

html

block

onclick

nonetype

display